From 3d0f8aa9c082e7896e1da008f31a543295eeeb5f Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Mon, 28 Mar 2016 08:05:18 +0300 Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D0=B7=D0=BE=D0=B2=20=D1=84=D0=BE?= =?UTF-8?q?=D0=BA=D1=83=D1=81=D0=B0=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20?= =?UTF-8?q?=D0=BE=D0=BA=D0=BE=D0=BD=D1=87=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/BaseAuthBody.jsx | 31 +++---------------- src/components/auth/PanelTransition.jsx | 22 +++++++++++++ src/components/auth/activation/Activation.jsx | 4 +-- .../auth/changePassword/ChangePassword.jsx | 4 +-- .../auth/forgotPassword/ForgotPassword.jsx | 4 +-- src/components/auth/login/Login.jsx | 4 +-- src/components/auth/password/Password.jsx | 4 +-- src/components/auth/register/Register.jsx | 4 +-- src/components/ui/Form.jsx | 9 ++++++ 9 files changed, 47 insertions(+), 39 deletions(-) diff --git a/src/components/auth/BaseAuthBody.jsx b/src/components/auth/BaseAuthBody.jsx index e0253f9..699739a 100644 --- a/src/components/auth/BaseAuthBody.jsx +++ b/src/components/auth/BaseAuthBody.jsx @@ -42,34 +42,11 @@ export default class BaseAuthBody extends Component { }; } - /** - * Fixes some issues with scroll, when input beeing focused - * - * When an element is focused, by default browsers will scroll its parents to display - * focused item to user. This behavior may cause unexpected visual effects, when - * you animating apearing of an input (e.g. transform) and auto focusing it. In - * that case the browser will scroll the parent container so that input will be - * visible. - * This method will fix that issue by finding parent with overflow: hidden and - * reseting its scrollLeft value to 0. - * - * Usage: - * - * - * @param {Object} event - */ - fixAutoFocus = (event) => { - let el = event.target; + autoFocus() { + const fieldId = this.autoFocusField; - while (el.parentNode) { - el = el.parentNode; - - if (getComputedStyle(el).overflow === 'hidden') { - el.scrollLeft = 0; - break; - } - } - }; + fieldId && this.form[fieldId] && this.form[fieldId].focus(); + } serialize() { return Object.keys(this.form).reduce((acc, key) => { diff --git a/src/components/auth/PanelTransition.jsx b/src/components/auth/PanelTransition.jsx index 6a750cf..629907f 100644 --- a/src/components/auth/PanelTransition.jsx +++ b/src/components/auth/PanelTransition.jsx @@ -134,6 +134,8 @@ class PanelTransition extends Component { height: forceHeight ? common.style.switchContextHeightSpring : 'auto' }; + this.tryToAutoFocus(panels.length); + const bodyHeight = { position: 'relative', height: `${canAnimateHeight ? common.style.heightSpring : formHeight}px` @@ -253,6 +255,26 @@ class PanelTransition extends Component { authFlow.goBack(); }; + /** + * Tries to auto focus form fields after transition end + * + * @param {number} length number of panels transitioned + */ + tryToAutoFocus(length) { + if (!this.body) { + return; + } + + if (length === 1) { + if (!this.wasAutoFocused) { + this.body.autoFocus(); + } + this.wasAutoFocused = true; + } else if (this.wasAutoFocused) { + this.wasAutoFocused = false; + } + } + getHeader({key, style, data}) { const {Title, hasBackButton} = data; const {transformSpring} = style; diff --git a/src/components/auth/activation/Activation.jsx b/src/components/auth/activation/Activation.jsx index 97b544d..c2217be 100644 --- a/src/components/auth/activation/Activation.jsx +++ b/src/components/auth/activation/Activation.jsx @@ -14,6 +14,8 @@ class Body extends BaseAuthBody { static displayName = 'ActivationBody'; static panelId = 'activation'; + autoFocusField = 'key'; + render() { return (
@@ -32,8 +34,6 @@ class Body extends BaseAuthBody { diff --git a/src/components/auth/changePassword/ChangePassword.jsx b/src/components/auth/changePassword/ChangePassword.jsx index f4dffd8..3c29fd3 100644 --- a/src/components/auth/changePassword/ChangePassword.jsx +++ b/src/components/auth/changePassword/ChangePassword.jsx @@ -15,6 +15,8 @@ class Body extends BaseAuthBody { static displayName = 'ChangePasswordBody'; static panelId = 'changePassword'; + autoFocusField = 'password'; + render() { return (
@@ -32,8 +34,6 @@ class Body extends BaseAuthBody { icon="key" color="darkBlue" type="password" - autoFocus - onFocus={this.fixAutoFocus} required placeholder={messages.currentPassword} /> diff --git a/src/components/auth/forgotPassword/ForgotPassword.jsx b/src/components/auth/forgotPassword/ForgotPassword.jsx index 55078b3..0ff039f 100644 --- a/src/components/auth/forgotPassword/ForgotPassword.jsx +++ b/src/components/auth/forgotPassword/ForgotPassword.jsx @@ -16,6 +16,8 @@ class Body extends BaseAuthBody { static panelId = 'forgotPassword'; static hasGoBack = true; + autoFocusField = 'email'; + // Если юзер вводил своё мыло во время попытки авторизации, то почему бы его сюда автоматически не подставить? render() { return ( @@ -29,8 +31,6 @@ class Body extends BaseAuthBody { diff --git a/src/components/auth/login/Login.jsx b/src/components/auth/login/Login.jsx index 230bff7..50d5267 100644 --- a/src/components/auth/login/Login.jsx +++ b/src/components/auth/login/Login.jsx @@ -15,6 +15,8 @@ class Body extends BaseAuthBody { static displayName = 'LoginBody'; static panelId = 'login'; + autoFocusField = 'login'; + render() { return (
@@ -22,8 +24,6 @@ class Body extends BaseAuthBody { diff --git a/src/components/auth/password/Password.jsx b/src/components/auth/password/Password.jsx index 4e9163a..54b14b8 100644 --- a/src/components/auth/password/Password.jsx +++ b/src/components/auth/password/Password.jsx @@ -17,6 +17,8 @@ class Body extends BaseAuthBody { static panelId = 'password'; static hasGoBack = true; + autoFocusField = 'password'; + render() { const {user} = this.context; @@ -38,8 +40,6 @@ class Body extends BaseAuthBody { diff --git a/src/components/auth/register/Register.jsx b/src/components/auth/register/Register.jsx index cad8726..07fc4eb 100644 --- a/src/components/auth/register/Register.jsx +++ b/src/components/auth/register/Register.jsx @@ -16,6 +16,8 @@ class Body extends BaseAuthBody { static displayName = 'RegisterBody'; static panelId = 'register'; + autoFocusField = 'username'; + render() { return (
@@ -25,8 +27,6 @@ class Body extends BaseAuthBody { icon="user" color="blue" type="text" - autoFocus - onFocus={this.fixAutoFocus} required placeholder={messages.yourNickname} /> diff --git a/src/components/ui/Form.jsx b/src/components/ui/Form.jsx index bb59b15..965dd50 100644 --- a/src/components/ui/Form.jsx +++ b/src/components/ui/Form.jsx @@ -56,6 +56,11 @@ export class Input extends Component { getValue() { return this.el.value; } + + focus() { + this.el.focus(); + setTimeout(this.el.focus.bind(this.el), 10); + } } export class Checkbox extends Component { @@ -86,6 +91,10 @@ export class Checkbox extends Component { getValue() { return this.el.checked ? 1 : 0; } + + focus() { + this.el.focus(); + } } export class Form extends Component {