From 5deed50a47ad5fdddcb5deee046d869fc9bf4d28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Thu, 23 Mar 2023 11:16:54 +0000 Subject: [PATCH 1/3] [fix] add timeout to Form's onBlur method to prevent focus losing when toggling checkboxes --- src/components/Form.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index 116179b46d4a..04d618f20e81 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -281,8 +281,10 @@ 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); + setTimeout(() => { + this.setTouchedInput(inputID); + this.validate(this.state.inputValues); + }, 100); }, onInputChange: (value, key) => { const inputKey = key || inputID; From bc04b7982b9e27eee08ffdac3ef8de84f142ce56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Fri, 24 Mar 2023 11:38:21 +0000 Subject: [PATCH 2/3] [fix] add a comment explaining the use of timeout in Form's onBlur() method --- src/components/Form.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Form.js b/src/components/Form.js index 04d618f20e81..f53682527e73 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -281,6 +281,9 @@ class Form extends React.Component { value: this.state.inputValues[inputID], errorText: this.state.errors[inputID] || fieldErrorMessage, onBlur: () => { + // 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); From 015066692ec84902690a795e174b3f96316bbe79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Fri, 24 Mar 2023 16:16:41 +0000 Subject: [PATCH 3/3] [fix] Increase Form's onBlur() timeout in order to have a safer margin --- src/components/Form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form.js b/src/components/Form.js index f53682527e73..633a93dfaef2 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -287,7 +287,7 @@ class Form extends React.Component { setTimeout(() => { this.setTouchedInput(inputID); this.validate(this.state.inputValues); - }, 100); + }, 200); }, onInputChange: (value, key) => { const inputKey = key || inputID;