Пофиксил прыгающую анимацию переходов

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}
                     />

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:
+     * <input autoFocus onFocus={this.fixAutoFocus} />
+     *
+     * @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();

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}
                 />

src/components/auth/Login.jsx

@@ -30,6 +30,7 @@ class Body extends BaseAuthBody {
                 <Input {...this.bindField('login')}
                     icon="envelope"
                     autoFocus
+                    onFocus={this.fixAutoFocus}
                     required
                     placeholder={messages.emailOrUsername}
                 />

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}
      */

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}
                 />

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}
                 />

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}
                 />