From 2aa5ea0f020f8fc5c3687de9772819bc3ac2211d Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 13 Aug 2019 17:43:28 -0400
Subject: [PATCH] gender step gets custom input ref, focuses on click

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

diff --git a/src/components/join-flow/gender-step.jsx b/src/components/join-flow/gender-step.jsx
index cd18ca76c..4d389ff79 100644
--- a/src/components/join-flow/gender-step.jsx
+++ b/src/components/join-flow/gender-step.jsx
@@ -55,9 +55,13 @@ class GenderStep extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'handleSetCustomRef',
             'handleValidSubmit'
         ]);
     }
+    handleSetCustomRef (customInputRef) {
+        this.customInput = customInputRef;
+    }
     handleValidSubmit (formData, formikBag) {
         formikBag.setSubmitting(false);
         if (!formData.gender || formData.gender === 'null') {
@@ -122,7 +126,10 @@ class GenderStep extends React.Component {
                                     {'gender-radio-row-selected': (values.gender === values.custom)}
                                 )}
                                 /* eslint-disable react/jsx-no-bind */
-                                onClick={() => setFieldValue('gender', values.custom, false)}
+                                onClick={() => {
+                                    setFieldValue('gender', values.custom, false);
+                                    if (this.customInput) this.customInput.focus();
+                                }}
                                 /* eslint-enable react/jsx-no-bind */
                             >
                                 <FormikRadioButton
@@ -139,6 +146,7 @@ class GenderStep extends React.Component {
                                         gender: newCustomVal,
                                         custom: newCustomVal
                                     })}
+                                    onSetCustomRef={this.handleSetCustomRef}
                                     /* eslint-enable react/jsx-no-bind */
                                 />
                             </div>