Merge pull request #3298 from benjiwheeler/join-flow-auto-focus

Join flow auto focus on first input

src/components/formik-forms/formik-input.jsx

@@ -11,7 +11,7 @@ require('./formik-input.scss');
 const FormikInput = ({
     className,
     error,
-    setRef,
+    onSetRef,
     toolTip,
     validationClassName,
     wrapperClassName,
@@ -32,7 +32,7 @@ const FormikInput = ({
                 className
             )}
             /* formik uses "innerRef" to return the actual input element */
-            innerRef={setRef}
+            innerRef={onSetRef}
             {...props}
         />
         {error ? (
@@ -54,7 +54,7 @@ const FormikInput = ({
 FormikInput.propTypes = {
     className: PropTypes.string,
     error: PropTypes.string,
-    setRef: PropTypes.func,
+    onSetRef: PropTypes.func,
     toolTip: PropTypes.string,
     type: PropTypes.string,
     validationClassName: PropTypes.string,

src/components/formik-forms/formik-radio-button.jsx

@@ -91,12 +91,12 @@ const FormikRadioButton = ({
             <FormikInput
                 className="formik-radio-input"
                 name="custom"
-                setRef={onSetCustomRef}
                 wrapperClassName="formik-radio-input-wrapper"
                 /* eslint-disable react/jsx-no-bind */
                 onChange={event => onSetCustom(event.target.value)}
                 onFocus={event => onSetCustom(event.target.value)}
                 /* eslint-enable react/jsx-no-bind */
+                onSetRef={onSetCustomRef}
             />
         )}
     </Field>

src/components/join-flow/email-step.jsx

@@ -17,11 +17,19 @@ class EmailStep extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'handleSetEmailRef',
             'handleValidSubmit',
             'validateEmail',
             'validateForm'
         ]);
     }
+    componentDidMount () {
+        // automatically start with focus on username field
+        if (this.emailInput) this.emailInput.focus();
+    }
+    handleSetEmailRef (emailInputRef) {
+        this.emailInput = emailInputRef;
+    }
     validateEmail (email) {
         if (!email) return this.props.intl.formatMessage({id: 'general.required'});
         const isValidLocally = emailValidator.validate(email);
@@ -99,6 +107,7 @@ class EmailStep extends React.Component {
                                 onBlur={() => validateField('email')}
                                 onFocus={() => setFieldError('email', null)}
                                 /* eslint-enable react/jsx-no-bind */
+                                onSetRef={this.handleSetEmailRef}
                             />
                             <div className="join-flow-email-checkbox-row">
                                 <FormikCheckbox

src/components/join-flow/username-step.jsx

@@ -22,6 +22,7 @@ class UsernameStep extends React.Component {
         bindAll(this, [
             'handleChangeShowPassword',
             'handleFocused',
+            'handleSetUsernameRef',
             'handleValidSubmit',
             'validatePasswordIfPresent',
             'validatePasswordConfirmIfPresent',
@@ -33,6 +34,10 @@ class UsernameStep extends React.Component {
             showPassword: false
         };
     }
+    componentDidMount () {
+        // automatically start with focus on username field
+        if (this.usernameInput) this.usernameInput.focus();
+    }
     handleChangeShowPassword () {
         this.setState({showPassword: !this.state.showPassword});
     }
@@ -41,6 +46,9 @@ class UsernameStep extends React.Component {
     handleFocused (fieldName) {
         this.setState({focused: fieldName});
     }
+    handleSetUsernameRef (usernameInputRef) {
+        this.usernameInput = usernameInputRef;
+    }
     // we allow username to be empty on blur, since you might not have typed anything yet
     validateUsernameIfPresent (username) {
         if (!username) return null; // skip validation if username is blank; null indicates valid
@@ -160,6 +168,7 @@ class UsernameStep extends React.Component {
                                     }}
                                     onFocus={() => this.handleFocused('username')}
                                     /* eslint-enable react/jsx-no-bind */
+                                    onSetRef={this.handleSetUsernameRef}
                                 />
                                 <div className="join-flow-password-section">
                                     <div className="join-flow-input-title">