From 2ecaf16e8b9ba9024845c583715b290d7c949953 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Tue, 16 Jan 2024 22:49:22 +0300 Subject: [PATCH 1/4] fix error message display bug on google signin --- src/pages/signin/LoginForm/BaseLoginForm.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js index 8fcea461eacd..5a6c8aed5050 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.js +++ b/src/pages/signin/LoginForm/BaseLoginForm.js @@ -276,13 +276,15 @@ function LoginForm(props) { textContentType="username" id="username" name="username" - onBlur={() => { - if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) { - return; - } - firstBlurred.current = true; - validate(login); - }} + onBlur={() => + setTimeout(() => { + if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) { + return; + } + firstBlurred.current = true; + validate(login); + }, 500) + } onChangeText={onTextInput} onSubmitEditing={validateAndSubmitForm} autoCapitalize="none" @@ -332,10 +334,10 @@ function LoginForm(props) { - e.preventDefault()}> + - e.preventDefault()}> + From ef7ee749731703376bf2c046e62081ca06a9ebeb Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sun, 21 Jan 2024 22:49:12 +0300 Subject: [PATCH 2/4] add comment --- src/pages/signin/LoginForm/BaseLoginForm.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js index 5a6c8aed5050..c0f8abee710a 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.js +++ b/src/pages/signin/LoginForm/BaseLoginForm.js @@ -277,6 +277,8 @@ function LoginForm(props) { id="username" name="username" onBlur={() => + // This delay is to avoid the validate being called before google iframe is rendered to + // avoid error message appearing after pressing google signin button. setTimeout(() => { if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) { return; From 1bcc02ec155aac3f83fd157aa1ced07652f30270 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 3 Feb 2024 12:23:27 +0300 Subject: [PATCH 3/4] update to validate on non-native only --- src/pages/signin/LoginForm/BaseLoginForm.js | 26 +++++++++++++-------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js index 1da92d447c5b..b126219e44db 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.js +++ b/src/pages/signin/LoginForm/BaseLoginForm.js @@ -28,6 +28,7 @@ import {parsePhoneNumber} from '@libs/PhoneNumber'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import Visibility from '@libs/Visibility'; +import willBlurTextInputOnTapOutside from '@libs/willBlurTextInputOnTapOutside'; import * as CloseAccount from '@userActions/CloseAccount'; import * as MemoryOnlyKeys from '@userActions/MemoryOnlyKeys/MemoryOnlyKeys'; import * as Session from '@userActions/Session'; @@ -277,16 +278,21 @@ function LoginForm(props) { id="username" name="username" testID="username" - onBlur={() => - // This delay is to avoid the validate being called before google iframe is rendered to - // avoid error message appearing after pressing google signin button. - setTimeout(() => { - if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) { - return; - } - firstBlurred.current = true; - validate(login); - }, 500) + onBlur={ + // As we have only two signin buttons (Apple/Google) other than the text input, + // for natives onBlur is called only when the buttons are pressed and we don't need + // to validate in those case as the user has opted for other signin flow. + willBlurTextInputOnTapOutside() && + (() => + // This delay is to avoid the validate being called before google iframe is rendered to + // avoid error message appearing after pressing google signin button. + setTimeout(() => { + if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) { + return; + } + firstBlurred.current = true; + validate(login); + }, 500)) } onChangeText={onTextInput} onSubmitEditing={validateAndSubmitForm} From 944a29b6bb9d451a7c01f42bdcdb70af68c9f357 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 5 Feb 2024 14:52:51 +0300 Subject: [PATCH 4/4] updated based on comments --- src/pages/signin/LoginForm/BaseLoginForm.js | 27 ++++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js index b126219e44db..6cbef7da7f3f 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.js +++ b/src/pages/signin/LoginForm/BaseLoginForm.js @@ -28,7 +28,7 @@ import {parsePhoneNumber} from '@libs/PhoneNumber'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import Visibility from '@libs/Visibility'; -import willBlurTextInputOnTapOutside from '@libs/willBlurTextInputOnTapOutside'; +import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside'; import * as CloseAccount from '@userActions/CloseAccount'; import * as MemoryOnlyKeys from '@userActions/MemoryOnlyKeys/MemoryOnlyKeys'; import * as Session from '@userActions/Session'; @@ -92,6 +92,8 @@ const defaultProps = { isInModal: false, }; +const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc(); + function LoginForm(props) { const styles = useThemeStyles(); const input = useRef(); @@ -282,17 +284,18 @@ function LoginForm(props) { // As we have only two signin buttons (Apple/Google) other than the text input, // for natives onBlur is called only when the buttons are pressed and we don't need // to validate in those case as the user has opted for other signin flow. - willBlurTextInputOnTapOutside() && - (() => - // This delay is to avoid the validate being called before google iframe is rendered to - // avoid error message appearing after pressing google signin button. - setTimeout(() => { - if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) { - return; - } - firstBlurred.current = true; - validate(login); - }, 500)) + willBlurTextInputOnTapOutside + ? () => + // This delay is to avoid the validate being called before google iframe is rendered to + // avoid error message appearing after pressing google signin button. + setTimeout(() => { + if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) { + return; + } + firstBlurred.current = true; + validate(login); + }, 500) + : undefined } onChangeText={onTextInput} onSubmitEditing={validateAndSubmitForm}