diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index ada40c24ed89..add58dbef18c 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -100,7 +100,7 @@ function getInitialValueByType(valueType) { } function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, onSubmit, ...rest}) { - const inputRefs = useRef(null); + const inputRefs = useRef({}); const touchedInputs = useRef({}); const [inputValues, setInputValues] = useState({}); const [errors, setErrors] = useState({}); @@ -204,8 +204,10 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC const registerInput = useCallback( (inputID, propsToParse = {}) => { - const newRef = propsToParse.ref || createRef(); - inputRefs[inputID] = newRef; + const newRef = inputRefs.current[inputID] || propsToParse.ref || createRef(); + if (inputRefs.current[inputID] !== newRef) { + inputRefs.current[inputID] = newRef; + } if (!_.isUndefined(propsToParse.value)) { inputValues[inputID] = propsToParse.value; diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js index 3d9fd37d6f22..82e70b68b3f0 100644 --- a/src/components/Form/FormWrapper.js +++ b/src/components/Form/FormWrapper.js @@ -105,8 +105,8 @@ function FormWrapper(props) { footerContent={footerContent} onFixTheErrorsLinkPressed={() => { const errorFields = !_.isEmpty(errors) ? errors : formState.errorFields; - const focusKey = _.find(_.keys(inputRefs), (key) => _.keys(errorFields).includes(key)); - const focusInput = inputRefs[focusKey].current; + const focusKey = _.find(_.keys(inputRefs.current), (key) => _.keys(errorFields).includes(key)); + const focusInput = inputRefs.current[focusKey].current; // Dismiss the keyboard for non-text fields by checking if the component has the isFocused method, as only TextInput has this method. if (typeof focusInput.isFocused !== 'function') { diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js index 3151380dc1f5..763f6c77d774 100644 --- a/src/pages/settings/Security/CloseAccountPage.js +++ b/src/pages/settings/Security/CloseAccountPage.js @@ -16,10 +16,11 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import * as CloseAccount from '../../../libs/actions/CloseAccount'; import ONYXKEYS from '../../../ONYXKEYS'; -import Form from '../../../components/Form'; import CONST from '../../../CONST'; import ConfirmModal from '../../../components/ConfirmModal'; import * as ValidationUtils from '../../../libs/ValidationUtils'; +import FormProvider from '../../../components/Form/FormProvider'; +import InputWrapper from '../../../components/Form/InputWrapper'; const propTypes = { /** Session of currently logged in user */ @@ -91,7 +92,7 @@ function CloseAccountPage(props) { title={props.translate('closeAccountPage.closeAccount')} onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)} /> -
+ ); }