From e55d2f27d83739232f77d450ced187935931f9aa Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Tue, 13 Aug 2019 16:32:13 -0400 Subject: [PATCH 1/5] simplified formik radio handling, attach label to input --- .../formik-forms/formik-radio-button.jsx | 21 +++++++++++-------- src/components/join-flow/gender-step.jsx | 15 ++++++++++--- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/components/formik-forms/formik-radio-button.jsx b/src/components/formik-forms/formik-radio-button.jsx index 70b27fb9b..31e4238bd 100644 --- a/src/components/formik-forms/formik-radio-button.jsx +++ b/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 }) => ( {label} @@ -49,7 +50,6 @@ const FormikRadioButtonSubComponent = ({ ); FormikRadioButtonSubComponent.propTypes = { - buttonValue: PropTypes.string, children: PropTypes.node, className: PropTypes.string, field: PropTypes.shape({ @@ -58,6 +58,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,21 +66,23 @@ FormikRadioButtonSubComponent.propTypes = { const FormikRadioButton = ({ - buttonValue, className, + id, isCustomInput, label, name, onSetCustom, + value, ...props }) => ( {isCustomInput && ( @@ -97,8 +100,8 @@ const FormikRadioButton = ({ ); FormikRadioButton.propTypes = { - buttonValue: PropTypes.string, className: PropTypes.string, + id: PropTypes.string, isCustomInput: PropTypes.bool, label: PropTypes.string, name: PropTypes.string, diff --git a/src/components/join-flow/gender-step.jsx b/src/components/join-flow/gender-step.jsx index 638a3bd5c..cd18ca76c 100644 --- a/src/components/join-flow/gender-step.jsx +++ b/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 }) => (
); GenderOption.propTypes = { + id: PropTypes.string, label: PropTypes.string, onSetFieldValue: PropTypes.func, selectedValue: PropTypes.string, @@ -89,12 +94,14 @@ class GenderStep extends React.Component { onSubmit={handleSubmit} > setValues({ gender: newCustomVal, @@ -135,6 +143,7 @@ class GenderStep extends React.Component { /> Date: Tue, 13 Aug 2019 17:42:21 -0400 Subject: [PATCH 2/5] formik-input can set ref to its inner input --- src/components/formik-forms/formik-input.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/formik-forms/formik-input.jsx b/src/components/formik-forms/formik-input.jsx index 908fc8890..6b37790eb 100644 --- a/src/components/formik-forms/formik-input.jsx +++ b/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 = ({ ); - FormikInput.propTypes = { className: PropTypes.string, error: PropTypes.string, + setRef: PropTypes.func, toolTip: PropTypes.string, type: PropTypes.string, validationClassName: PropTypes.string, From 5ec8811427cc67dc0e9d966b833b563fb2582fb1 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Tue, 13 Aug 2019 17:42:58 -0400 Subject: [PATCH 3/5] formik-radio-button can pass custom input ref up --- src/components/formik-forms/formik-radio-button.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/formik-forms/formik-radio-button.jsx b/src/components/formik-forms/formik-radio-button.jsx index 31e4238bd..20858567c 100644 --- a/src/components/formik-forms/formik-radio-button.jsx +++ b/src/components/formik-forms/formik-radio-button.jsx @@ -72,6 +72,7 @@ const FormikRadioButton = ({ label, name, onSetCustom, + onSetCustomRef, value, ...props }) => ( @@ -89,6 +90,7 @@ const FormikRadioButton = ({ onSetCustom(event.target.value)} @@ -106,6 +108,7 @@ FormikRadioButton.propTypes = { label: PropTypes.string, name: PropTypes.string, onSetCustom: PropTypes.func, + onSetCustomRef: PropTypes.func, value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) }; From 2aa5ea0f020f8fc5c3687de9772819bc3ac2211d Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Tue, 13 Aug 2019 17:43:28 -0400 Subject: [PATCH 4/5] 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 */ > From 1512cdb4df7a2ee0b9d18dcd15e6f6c0ec254b1f Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Tue, 13 Aug 2019 17:45:57 -0400 Subject: [PATCH 5/5] restored radio button label htmlFor --- src/components/formik-forms/formik-radio-button.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/formik-forms/formik-radio-button.jsx b/src/components/formik-forms/formik-radio-button.jsx index 20858567c..c09be7139 100644 --- a/src/components/formik-forms/formik-radio-button.jsx +++ b/src/components/formik-forms/formik-radio-button.jsx @@ -41,6 +41,7 @@ const FormikRadioButtonSubComponent = ({ 'formik-radio-label', labelClassName )} + htmlFor={id} > {label}