Merge pull request #23306 from joh42/21838

Fix - prevent server errors from being cleared on form input field blur

contributingGuides/FORMS.md

@@ -100,7 +100,7 @@ Form inputs will NOT store draft values by default. This is to avoid accidentall
 
 ### Validate on Blur, on Change and Submit
 
-Each individual form field that requires validation will have its own validate test defined. When the form field loses focus (blur) we will run that validate test and show feedback. A blur on one field will not cause other fields to validate or show errors unless they have already been blurred.
+Each individual form field that requires validation will have its own validate test defined. When the form field loses focus (blur) we will run that validate test and show feedback. A blur on one field will not cause other fields to validate or show errors unless they have already been blurred. To prevent server errors from being cleared inadvertently, we only run validation on blur if any form data has changed since the last validation/submit.
 
 Once a user has “touched” an input, i.e. blurred the input, we will also start validating that input on change when the user goes back to editing it.
 

src/components/Form.js

@@ -101,6 +101,7 @@ function Form(props) {
     const inputRefs = useRef({});
     const touchedInputs = useRef({});
     const isFirstRender = useRef(true);
+    const lastValidatedValues = useRef({...props.draftValues});
 
     const {validate, onSubmit, children} = props;
 
@@ -146,6 +147,8 @@ function Form(props) {
                 setErrors(touchedInputErrors);
             }
 
+            lastValidatedValues.current = values;
+
             return touchedInputErrors;
         },
         [errors, touchedInputs, props.formID, validate],
@@ -300,7 +303,12 @@ function Form(props) {
                         // web and mobile web platforms.
                         setTimeout(() => {
                             setTouchedInput(inputID);
-                            onValidate(inputValues);
+
+                            // To prevent server errors from being cleared inadvertently, we only run validation on blur if any form values have changed since the last validation/submit
+                            const shouldValidate = !_.isEqual(inputValues, lastValidatedValues.current);
+                            if (shouldValidate) {
+                                onValidate(inputValues);
+                            }
                         }, 200);
 
                         if (_.isFunction(child.props.onBlur)) {