Merge pull request #49828 from cretadn22/reset-error-on-going-back

reset error on going back
Expensify · Oct 1, 2024 · d94d7b8 · d94d7b8
2 parents 8b13d8d + c900bef
commit d94d7b8
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx
@@ -237,8 +237,16 @@ function FormProvider(
         },
         [inputValues],
     );
+
+    const resetErrors = useCallback(() => {
+        FormActions.clearErrors(formID);
+        FormActions.clearErrorFields(formID);
+        setErrors({});
+    }, [formID]);
+
     useImperativeHandle(forwardedRef, () => ({
         resetForm,
+        resetErrors,
     }));
 
     const registerInput = useCallback<RegisterInput>(

diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts
@@ -157,6 +157,7 @@ type FormProps<TFormID extends OnyxFormKey = OnyxFormKey> = {
 
 type FormRef<TFormID extends OnyxFormKey = OnyxFormKey> = {
     resetForm: (optionalValue: FormOnyxValues<TFormID>) => void;
+    resetErrors: () => void;
 };
 
 type InputRefs = Record<string, MutableRefObject<InputComponentBaseProps>>;

diff --git a/src/pages/MissingPersonalDetails/index.tsx b/src/pages/MissingPersonalDetails/index.tsx
@@ -5,7 +5,7 @@ import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
-import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import type {FormInputErrors, FormOnyxValues, FormRef} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader';
@@ -34,6 +34,7 @@ function MissingPersonalDetails() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const ref: ForwardedRef<InteractiveStepSubHeaderHandle> = useRef(null);
+    const formRef = useRef<FormRef | null>(null);
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
     const [cardList] = useOnyx(ONYXKEYS.CARD_LIST);
 
@@ -65,6 +66,7 @@ function MissingPersonalDetails() {
             return;
         }
         ref.current?.movePrevious();
+        formRef.current?.resetErrors();
         prevScreen();
     };
 
@@ -187,6 +189,7 @@ function MissingPersonalDetails() {
                 />
             </View>
             <FormProvider
+                ref={formRef}
                 formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
                 submitButtonText={screenIndex === formSteps.length - 1 ? translate('common.confirm') : translate('common.next')}
                 onSubmit={screenIndex === formSteps.length - 1 ? updatePersonalDetails : handleNextScreen}

diff --git a/...counting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx b/...counting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx
@@ -3,7 +3,7 @@ import type {ForwardedRef} from 'react';
 import {InteractionManager, View} from 'react-native';
 import ConnectionLayout from '@components/ConnectionLayout';
 import FormProvider from '@components/Form/FormProvider';
-import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import type {FormInputErrors, FormOnyxValues, FormRef} from '@components/Form/types';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader';
 import useLocalize from '@hooks/useLocalize';
@@ -31,6 +31,7 @@ function NetSuiteImportAddCustomListPage({policy}: WithPolicyConnectionsProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const ref: ForwardedRef<InteractiveStepSubHeaderHandle> = useRef(null);
+    const formRef = useRef<FormRef | null>(null);
 
     const config = policy?.connections?.netsuite?.options?.config;
     const customLists = useMemo(() => config?.syncOptions?.customLists ?? [], [config?.syncOptions]);
@@ -67,6 +68,7 @@ function NetSuiteImportAddCustomListPage({policy}: WithPolicyConnectionsProps) {
             return;
         }
         ref.current?.movePrevious();
+        formRef.current?.resetErrors();
         prevScreen();
     };
 
@@ -156,6 +158,7 @@ function NetSuiteImportAddCustomListPage({policy}: WithPolicyConnectionsProps) {
             </View>
             <View style={[styles.flexGrow1, styles.mt3]}>
                 <FormProvider
+                    ref={formRef}
                     formID={ONYXKEYS.FORMS.NETSUITE_CUSTOM_LIST_ADD_FORM}
                     submitButtonText={screenIndex === formSteps.length - 1 ? translate('common.confirm') : translate('common.next')}
                     onSubmit={screenIndex === formSteps.length - 1 ? updateNetSuiteCustomLists : handleNextScreen}

diff --git a/...nting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx b/...nting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx
@@ -4,7 +4,7 @@ import {InteractionManager, View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import ConnectionLayout from '@components/ConnectionLayout';
 import FormProvider from '@components/Form/FormProvider';
-import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import type {FormInputErrors, FormOnyxValues, FormRef} from '@components/Form/types';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader';
 import useLocalize from '@hooks/useLocalize';
@@ -35,6 +35,7 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const ref: ForwardedRef<InteractiveStepSubHeaderHandle> = useRef(null);
+    const formRef = useRef<FormRef | null>(null);
 
     const config = policy?.connections?.netsuite?.options?.config;
     const customSegments = useMemo(() => config?.syncOptions?.customSegments ?? [], [config?.syncOptions]);
@@ -67,6 +68,7 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps
             return;
         }
         ref.current?.movePrevious();
+        formRef.current?.resetErrors();
         prevScreen();
     };
 
@@ -206,6 +208,7 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps
                     renderSubStepContent
                 ) : (
                     <FormProvider
+                        ref={formRef}
                         formID={ONYXKEYS.FORMS.NETSUITE_CUSTOM_SEGMENT_ADD_FORM}
                         submitButtonText={screenIndex === formSteps.length - 1 ? translate('common.confirm') : translate('common.next')}
                         onSubmit={screenIndex === formSteps.length - 1 ? updateNetSuiteCustomSegments : handleNextScreen}