Merge pull request #24011 from tienifr/fix/23552-form-validation-triggers-on-blur

Author: thienlnam

src/components/Form.js

@@ -17,6 +17,7 @@ import ScrollViewWithContext from './ScrollViewWithContext';
 import stylePropTypes from '../styles/stylePropTypes';
 import {withNetwork} from './OnyxProvider';
 import networkPropTypes from './networkPropTypes';
+import Visibility from '../libs/Visibility';
 
 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -304,18 +305,21 @@ function Form(props) {
                     defaultValue: undefined,
                     errorText: errors[inputID] || fieldErrorMessage,
                     onBlur: (event) => {
-                        // We delay the validation in order to prevent Checkbox loss of focus when
-                        // the user are focusing a TextInput and proceeds to toggle a CheckBox in
-                        // web and mobile web platforms.
-                        setTimeout(() => {
-                            setTouchedInput(inputID);
-
-                            // 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);
+                        // Only run validation when user proactively blurs the input.
+                        if (Visibility.isVisible() && Visibility.hasFocus()) {
+                            // We delay the validation in order to prevent Checkbox loss of focus when
+                            // the user are focusing a TextInput and proceeds to toggle a CheckBox in
+                            // web and mobile web platforms.
+                            setTimeout(() => {
+                                setTouchedInput(inputID);
+
+                                // 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)) {
                             child.props.onBlur(event);

src/components/TextInput/index.js

@@ -6,6 +6,7 @@ import BaseTextInput from './BaseTextInput';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
 import DomUtils from '../../libs/DomUtils';
 import Visibility from '../../libs/Visibility';
+import * as Browser from '../../libs/Browser';
 
 function TextInput(props) {
     const textInputRef = useRef(null);
@@ -21,7 +22,7 @@ function TextInput(props) {
         }
 
         removeVisibilityListenerRef.current = Visibility.onVisibilityChange(() => {
-            if (!Visibility.isVisible() || !textInputRef.current || DomUtils.getActiveElement() !== textInputRef.current) {
+            if (!Browser.isMobileChrome() || !Visibility.isVisible() || !textInputRef.current || DomUtils.getActiveElement() !== textInputRef.current) {
                 return;
             }
             textInputRef.current.blur();