Merge pull request #29962 from software-mansion-labs/form-migration/C…

…loseAccountPage [Form Provider Refactor] CloseAccountPage
Expensify · Oct 23, 2023 · 2299ab8 · 2299ab8
2 parents 6c54369 + 8111010
commit 2299ab8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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)}
             />
-            <Form
+            <FormProvider
                 formID={ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM}
                 validate={validate}
                 onSubmit={showConfirmModal}
@@ -101,7 +102,8 @@ function CloseAccountPage(props) {
             >
                 <View style={[styles.flexGrow1]}>
                     <Text>{props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="reasonForLeaving"
                         autoGrowHeight
                         textAlignVertical="top"
@@ -113,7 +115,8 @@ function CloseAccountPage(props) {
                     <Text style={[styles.mt5]}>
                         {props.translate('closeAccountPage.enterDefaultContactToConfirm')} <Text style={[styles.textStrong]}>{userEmailOrPhone}</Text>
                     </Text>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="phoneOrEmail"
                         autoCapitalize="none"
                         label={props.translate('closeAccountPage.enterDefaultContact')}
@@ -136,7 +139,7 @@ function CloseAccountPage(props) {
                         shouldShowCancelButton
                     />
                 </View>
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }