Merge pull request #3250 from benjiwheeler/join-flow-gender-custom-focus

Join flow gender custom focus

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

@@ -11,6 +11,7 @@ require('./formik-input.scss');
 const FormikInput = ({
     className,
     error,
+    setRef,
     toolTip,
     validationClassName,
     wrapperClassName,
@@ -30,6 +31,8 @@ const FormikInput = ({
                 {fail: error},
                 className
             )}
+            /* formik uses "innerRef" to return the actual input element */
+            innerRef={setRef}
             {...props}
         />
         {error ? (
@@ -48,10 +51,10 @@ const FormikInput = ({
     </div>
 );
 
-
 FormikInput.propTypes = {
     className: PropTypes.string,
     error: PropTypes.string,
+    setRef: PropTypes.func,
     toolTip: PropTypes.string,
     type: PropTypes.string,
     validationClassName: PropTypes.string,

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

@@ -10,24 +10,26 @@ require('./formik-radio-button.scss');
 require('../forms/row.scss');
 
 const FormikRadioButtonSubComponent = ({
-    buttonValue,
     children,
     className,
-    field,
+    field, // field.value is the current selected value of the entire radio group
+    id,
     label,
     labelClassName,
+    value,
     ...props
 }) => (
     <React.Fragment>
         <input
-            checked={buttonValue === field.value}
+            checked={value === field.value}
             className={classNames(
                 'formik-radio-button',
                 className
             )}
+            id={id}
             name={field.name}
             type="radio"
-            value={buttonValue}
+            value={value}
             onBlur={field.onBlur} /* eslint-disable-line react/jsx-handler-names */
             onChange={field.onChange} /* eslint-disable-line react/jsx-handler-names */
             {...props}
@@ -39,7 +41,7 @@ const FormikRadioButtonSubComponent = ({
                     'formik-radio-label',
                     labelClassName
                 )}
-                htmlFor={buttonValue}
+                htmlFor={id}
             >
                 {label}
             </label>
@@ -49,7 +51,6 @@ const FormikRadioButtonSubComponent = ({
 );
 
 FormikRadioButtonSubComponent.propTypes = {
-    buttonValue: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     field: PropTypes.shape({
@@ -58,6 +59,7 @@ FormikRadioButtonSubComponent.propTypes = {
         onChange: PropTypes.function,
         value: PropTypes.string
     }),
+    id: PropTypes.string,
     label: PropTypes.string,
     labelClassName: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
@@ -65,27 +67,31 @@ FormikRadioButtonSubComponent.propTypes = {
 
 
 const FormikRadioButton = ({
-    buttonValue,
     className,
+    id,
     isCustomInput,
     label,
     name,
     onSetCustom,
+    onSetCustomRef,
+    value,
     ...props
 }) => (
     <Field
-        buttonValue={buttonValue}
         className={className}
         component={FormikRadioButtonSubComponent}
+        id={id}
         label={label}
         labelClassName={isCustomInput ? 'formik-radio-label-other' : ''}
         name={name}
+        value={value}
         {...props}
     >
         {isCustomInput && (
             <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)}
@@ -97,12 +103,13 @@ const FormikRadioButton = ({
 );
 
 FormikRadioButton.propTypes = {
-    buttonValue: PropTypes.string,
     className: PropTypes.string,
+    id: PropTypes.string,
     isCustomInput: PropTypes.bool,
     label: PropTypes.string,
     name: PropTypes.string,
     onSetCustom: PropTypes.func,
+    onSetCustomRef: PropTypes.func,
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 

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

@@ -11,10 +11,12 @@ const JoinFlowStep = require('./join-flow-step.jsx');
 require('./join-flow-steps.scss');
 
 const GenderOption = ({
+    id,
     label,
     onSetFieldValue,
     selectedValue,
-    value
+    value,
+    ...props
 }) => (
     <div
         className={classNames(
@@ -29,17 +31,20 @@ const GenderOption = ({
         /* eslint-enable react/jsx-no-bind */
     >
         <FormikRadioButton
-            buttonValue={value}
             className={classNames(
                 'join-flow-radio'
             )}
+            id={id}
             label={label}
             name="gender"
+            value={value}
+            {...props}
         />
     </div>
 );
 
 GenderOption.propTypes = {
+    id: PropTypes.string,
     label: PropTypes.string,
     onSetFieldValue: PropTypes.func,
     selectedValue: PropTypes.string,
@@ -50,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') {
@@ -89,12 +98,14 @@ class GenderStep extends React.Component {
                             onSubmit={handleSubmit}
                         >
                             <GenderOption
+                                id="GenderRadioOptionFemale"
                                 label={this.props.intl.formatMessage({id: 'general.female'})}
                                 selectedValue={values.gender}
                                 value="Female"
                                 onSetFieldValue={setFieldValue}
                             />
                             <GenderOption
+                                id="GenderRadioOptionMale"
                                 label={this.props.intl.formatMessage({id: 'general.male'})}
                                 selectedValue={values.gender}
                                 value="Male"
@@ -115,26 +126,32 @@ 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
                                     isCustomInput
-                                    buttonValue={values.custom}
                                     className={classNames(
                                         'join-flow-radio'
                                     )}
+                                    id="GenderRadioOptionCustom"
                                     label={this.props.intl.formatMessage({id: 'registration.genderOptionAnother'})}
                                     name="gender"
+                                    value={values.custom}
                                     /* eslint-disable react/jsx-no-bind */
                                     onSetCustom={newCustomVal => setValues({
                                         gender: newCustomVal,
                                         custom: newCustomVal
                                     })}
+                                    onSetCustomRef={this.handleSetCustomRef}
                                     /* eslint-enable react/jsx-no-bind */
                                 />
                             </div>
                             <GenderOption
+                                id="GenderRadioOptionPreferNot"
                                 label={this.props.intl.formatMessage({id: 'registration.genderOptionPreferNotToSay'})}
                                 selectedValue={values.gender}
                                 value="Prefer not to say"