Merge pull request #16444 from fabioh8010/bugfix/13623

[fix] add timeout to Form's onBlur method to prevent focus losing when toggling checkboxes
Expensify · Mar 24, 2023 · 2e130e5 · 2e130e5
2 parents 7b8f085 + 0150666
commit 2e130e5
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -281,8 +281,13 @@ class Form extends React.Component {
                 value: this.state.inputValues[inputID],
                 errorText: this.state.errors[inputID] || fieldErrorMessage,
                 onBlur: () => {
-                    this.setTouchedInput(inputID);
-                    this.validate(this.state.inputValues);
+                    // 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(() => {
+                        this.setTouchedInput(inputID);
+                        this.validate(this.state.inputValues);
+                    }, 200);
                 },
                 onInputChange: (value, key) => {
                     const inputKey = key || inputID;