tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merged in fix-lost-focus-issue (pull request #26) 

Fix lost focus issue
This commit is contained in:
Ivan Diaz 2016-07-26 16:32:26 -03:00
parent 8fa096f662 1e634fe366
commit d7096f9231
2 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/app/main/main-home/main-home-page-login-widget.js
View File

@ -1,10 +1,12 @@
const React = require('react'); const React = require('react');
const ReactDOM = require('react-dom');
const Reflux = require('reflux'); const Reflux = require('reflux');
const _ = require('lodash'); const _ = require('lodash');
const classNames = require('classnames'); const classNames = require('classnames');
const UserActions = require('actions/user-actions'); const UserActions = require('actions/user-actions');
const UserStore = require('stores/user-store'); const UserStore = require('stores/user-store');
const focus = require('lib-core/focus');
const Button = require('core-components/button'); const Button = require('core-components/button');
const Form = require('core-components/form'); const Form = require('core-components/form');
@ -35,7 +37,7 @@ let MainHomePageLoginWidget = React.createClass({
renderLogin() { renderLogin() {
return ( return (
<Widget className="main-home-page--widget" title="Login"> <Widget className="main-home-page--widget" title="Login" ref="loginWidget">
<Form className="login-widget--form" ref="loginForm" onSubmit={this.handleLoginFormSubmit} errors={this.state.loginFormErrors} onValidateErrors={this.handleLoginFormErrorsValidation}> <Form className="login-widget--form" ref="loginForm" onSubmit={this.handleLoginFormSubmit} errors={this.state.loginFormErrors} onValidateErrors={this.handleLoginFormErrorsValidation}>
<div className="login-widget--inputs"> <div className="login-widget--inputs">
<Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL" required/> <Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL" required/>
@ -46,7 +48,7 @@ let MainHomePageLoginWidget = React.createClass({
<Button type="primary">LOG IN</Button> <Button type="primary">LOG IN</Button>
</div> </div>
</Form> </Form>
<Button className="login-widget--forgot-password" type="link" onClick={this.handleForgotPasswordClick}> <Button className="login-widget--forgot-password" type="link" onClick={this.handleForgotPasswordClick} onMouseDown={(event) => {event.preventDefault()}}>
{'Forgot your password?'} {'Forgot your password?'}
</Button> </Button>
</Widget> </Widget>
@ -55,7 +57,7 @@ let MainHomePageLoginWidget = React.createClass({
renderPasswordRecovery() { renderPasswordRecovery() {
return ( return (
<Widget className="main-home-page--widget main-home-page--password-widget" title="Password Recovery"> <Widget className="main-home-page--widget main-home-page--password-widget" title="Password Recovery" ref="recoverWidget">
<Form className="login-widget--form" onSubmit={this.handleForgotPasswordSubmit}> <Form className="login-widget--form" onSubmit={this.handleForgotPasswordSubmit}>
<div className="login-widget--inputs"> <div className="login-widget--inputs">
<Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL"/> <Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL"/>
@ -64,7 +66,7 @@ let MainHomePageLoginWidget = React.createClass({
<Button type="primary">Recover my password</Button> <Button type="primary">Recover my password</Button>
</div> </div>
</Form> </Form>
<Button className="login-widget--forgot-password" type="link" onClick={this.handleBackToLoginClick}> <Button className="login-widget--forgot-password" type="link" onClick={this.handleBackToLoginClick} onMouseDown={(event) => {event.preventDefault()}}>
{'Back to login form'} {'Back to login form'}
</Button> </Button>
</Widget> </Widget>
@ -88,13 +90,13 @@ let MainHomePageLoginWidget = React.createClass({
handleForgotPasswordClick() { handleForgotPasswordClick() {
this.setState({ this.setState({
sideToShow: 'back' sideToShow: 'back'
}); }, this.moveFocusToCurrentSide);
}, },
handleBackToLoginClick() { handleBackToLoginClick() {
this.setState({ this.setState({
sideToShow: 'front' sideToShow: 'front'
}); }, this.moveFocusToCurrentSide);
}, },
onUserStoreChanged(event) { onUserStoreChanged(event) {
@ -107,6 +109,23 @@ let MainHomePageLoginWidget = React.createClass({
this.refs.loginForm.refs.password.focus() this.refs.loginForm.refs.password.focus()
}.bind(this)); }.bind(this));
} }
},
moveFocusToCurrentSide() {
let currentWidget;
let previousWidget;
if (this.state.sideToShow === 'front') {
currentWidget = ReactDOM.findDOMNode(this.refs.loginWidget);
previousWidget = ReactDOM.findDOMNode(this.refs.recoverWidget);
} else {
currentWidget = ReactDOM.findDOMNode(this.refs.recoverWidget);
previousWidget = ReactDOM.findDOMNode(this.refs.loginWidget);
}
if (focus.isActiveElementInsideDOMTree(previousWidget)) {
focus.focusFirstInput(currentWidget);
}
} }
}); });

18
client/src/lib-core/focus.js Normal file
View File

@ -0,0 +1,18 @@
const _ = require('lodash');
export default {
isActiveElementInsideDOMTree(domTree = document) {
let activeElement = document.activeElement;
let elements = domTree.querySelectorAll('*');
return (_.findIndex(elements, activeElement) !== -1);
},
focusFirstInput(domTree) {
let firstFocusableElement = domTree.querySelector('input');
if (firstFocusableElement) {
firstFocusableElement.focus();
}
}
};