diff --git a/src/components/Form.js b/src/components/Form.js index 4f4c7527cf1d..af776ce9d0f7 100644 --- a/src/components/Form.js +++ b/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); diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index 10da6fbb87ad..48a92f081200 100644 --- a/src/components/TextInput/index.js +++ b/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();