From daeed19dc5dacc926cd8a48ccc2203bfb4a82c7b Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 26 Aug 2019 16:01:42 -0400
Subject: [PATCH 1/3] use onSetRef instead of setRef in formik-input

---
 src/components/formik-forms/formik-input.jsx        | 6 +++---
 src/components/formik-forms/formik-radio-button.jsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/formik-forms/formik-input.jsx b/src/components/formik-forms/formik-input.jsx
index 6b37790eb..1a5961274 100644
--- a/src/components/formik-forms/formik-input.jsx
+++ b/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,
diff --git a/src/components/formik-forms/formik-radio-button.jsx b/src/components/formik-forms/formik-radio-button.jsx
index c09be7139..b7ee7f488 100644
--- a/src/components/formik-forms/formik-radio-button.jsx
+++ b/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>

From ea9d62129affdab4030234fc777b7ba83138d28a Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 26 Aug 2019 16:01:59 -0400
Subject: [PATCH 2/3] in username step, auto-focus on first input

---
 src/components/join-flow/username-step.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/join-flow/username-step.jsx b/src/components/join-flow/username-step.jsx
index f588360cb..61a68c723 100644
--- a/src/components/join-flow/username-step.jsx
+++ b/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">

From 19a15988b21f8f1e71bd36eb8b14ad64bf0446b3 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 26 Aug 2019 16:02:07 -0400
Subject: [PATCH 3/3] in email step, auto-focus on first input

---
 src/components/join-flow/email-step.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx
index b9d03e239..98836f1e7 100644
--- a/src/components/join-flow/email-step.jsx
+++ b/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