Merge pull request #26225 from hungvu193/fix-21838

Fix: Prevent clearing server error on blur
Expensify · Sep 11, 2023 · 1c66375 · 1c66375
2 parents 29fd7eb + 354abb4
commit 1c66375
Showing 1 changed file with 20 additions and 4 deletions.
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -113,12 +113,14 @@ function Form(props) {
 
     const {validate, onSubmit, children} = props;
 
+    const hasServerError = useMemo(() => Boolean(props.formState) && !_.isEmpty(props.formState.errors), [props.formState]);
+
     /**
      * @param {Object} values - An object containing the value of each inputID, e.g. {inputID1: value1, inputID2: value2}
      * @returns {Object} - An object containing the errors for each inputID, e.g. {inputID1: error1, inputID2: error2}
      */
     const onValidate = useCallback(
-        (values) => {
+        (values, shouldClearServerError = true) => {
             const trimmedStringValues = {};
             _.each(values, (inputValue, inputID) => {
                 if (_.isString(inputValue)) {
@@ -128,7 +130,9 @@ function Form(props) {
                 }
             });
 
-            FormActions.setErrors(props.formID, null);
+            if (shouldClearServerError) {
+                FormActions.setErrors(props.formID, null);
+            }
             FormActions.setErrorFields(props.formID, null);
 
             // Run any validations passed as a prop
@@ -321,7 +325,7 @@ function Form(props) {
                             setTimeout(() => {
                                 setTouchedInput(inputID);
                                 if (props.shouldValidateOnBlur) {
-                                    onValidate(inputValues);
+                                    onValidate(inputValues, !hasServerError);
                                 }
                             }, 200);
                         }
@@ -365,7 +369,19 @@ function Form(props) {
 
             return childrenElements;
         },
-        [errors, inputRefs, inputValues, onValidate, props.draftValues, props.formID, props.formState, setTouchedInput, props.shouldValidateOnBlur, props.shouldValidateOnChange],
+        [
+            errors,
+            inputRefs,
+            inputValues,
+            onValidate,
+            props.draftValues,
+            props.formID,
+            props.formState,
+            setTouchedInput,
+            props.shouldValidateOnBlur,
+            props.shouldValidateOnChange,
+            hasServerError,
+        ],
     );
 
     const scrollViewContent = useCallback(