From a88e958c7c038ae304e24c85281cf65936b51eae Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sat, 12 Mar 2016 16:23:55 +0200 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D1=84=D0=B8=D0=BA=D1=81=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BF=D1=80=D1=8B=D0=B3=D0=B0=D1=8E=D1=89=D1=83=D1=8E?= =?UTF-8?q?=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8E=20=D0=BF?= =?UTF-8?q?=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/Activation.jsx | 1 + src/components/auth/BaseAuthBody.jsx | 29 +++++++++++++++++++++++++ src/components/auth/ForgotPassword.jsx | 1 + src/components/auth/Login.jsx | 1 + src/components/auth/PanelTransition.jsx | 7 +++--- src/components/auth/Password.jsx | 1 + src/components/auth/PasswordChange.jsx | 1 + src/components/auth/Register.jsx | 1 + 8 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/components/auth/Activation.jsx b/src/components/auth/Activation.jsx index b02bf18..d1b62b8 100644 --- a/src/components/auth/Activation.jsx +++ b/src/components/auth/Activation.jsx @@ -40,6 +40,7 @@ class Body extends BaseAuthBody { color="blue" className={styles.activationCodeInput} autoFocus + onFocus={this.fixAutoFocus} required placeholder={messages.enterTheCode} /> diff --git a/src/components/auth/BaseAuthBody.jsx b/src/components/auth/BaseAuthBody.jsx index f83412a..b745466 100644 --- a/src/components/auth/BaseAuthBody.jsx +++ b/src/components/auth/BaseAuthBody.jsx @@ -39,6 +39,35 @@ 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; + + while (el.parentNode) { + el = el.parentNode; + + if (getComputedStyle(el).overflow === 'hidden') { + el.scrollLeft = 0; + break; + } + } + }; + serialize() { return Object.keys(this.form).reduce((acc, key) => { acc[key] = this.form[key].getValue(); diff --git a/src/components/auth/ForgotPassword.jsx b/src/components/auth/ForgotPassword.jsx index 6f86f13..4f5dbc5 100644 --- a/src/components/auth/ForgotPassword.jsx +++ b/src/components/auth/ForgotPassword.jsx @@ -37,6 +37,7 @@ class Body extends BaseAuthBody { icon="envelope" color="lightViolet" autoFocus + onFocus={this.fixAutoFocus} required placeholder={messages.accountEmail} /> diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx index 0bcf7bc..7dace24 100644 --- a/src/components/auth/Login.jsx +++ b/src/components/auth/Login.jsx @@ -30,6 +30,7 @@ class Body extends BaseAuthBody { diff --git a/src/components/auth/PanelTransition.jsx b/src/components/auth/PanelTransition.jsx index 84aac19..d3f4400 100644 --- a/src/components/auth/PanelTransition.jsx +++ b/src/components/auth/PanelTransition.jsx @@ -91,7 +91,7 @@ class PanelTransition extends Component { const contentHeight = { overflow: 'hidden', - height: forceHeight ? common.switchContextHeightSpring : 'auto' + height: forceHeight ? common.style.switchContextHeightSpring : 'auto' }; const bodyHeight = { @@ -141,6 +141,7 @@ class PanelTransition extends Component { /** * @param {Object} config + * @param {string} config.key * @param {Object} [options] * @param {Object} [options.isLeave=false] - true, if this is a leave transition * @@ -298,8 +299,8 @@ class PanelTransition extends Component { /** * @param {string} key - * @param {Object} props - * @param {number} props.opacitySpring + * @param {Object} style + * @param {number} style.opacitySpring * * @return {Object} */ diff --git a/src/components/auth/Password.jsx b/src/components/auth/Password.jsx index 2c3913f..ad94865 100644 --- a/src/components/auth/Password.jsx +++ b/src/components/auth/Password.jsx @@ -46,6 +46,7 @@ class Body extends BaseAuthBody { icon="key" type="password" autoFocus + onFocus={this.fixAutoFocus} required placeholder={messages.accountPassword} /> diff --git a/src/components/auth/PasswordChange.jsx b/src/components/auth/PasswordChange.jsx index a326232..fb09742 100644 --- a/src/components/auth/PasswordChange.jsx +++ b/src/components/auth/PasswordChange.jsx @@ -35,6 +35,7 @@ class Body extends BaseAuthBody { icon="key" color="darkBlue" autoFocus + onFocus={this.fixAutoFocus} required placeholder={passwordChangedMessages.newPassword} /> diff --git a/src/components/auth/Register.jsx b/src/components/auth/Register.jsx index 7afb324..7284064 100644 --- a/src/components/auth/Register.jsx +++ b/src/components/auth/Register.jsx @@ -38,6 +38,7 @@ class Body extends BaseAuthBody { color="blue" type="text" autoFocus + onFocus={this.fixAutoFocus} required placeholder={messages.yourNickname} />