Merge pull request #42830 from nkdengineer/fix/42054

fix Login error isn't appearing when you tap away
Expensify · Jun 7, 2024 · 185fc63 · 185fc63
2 parents 9c5bf21 + 1d6e83c
commit 185fc63
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 23 deletions.
diff --git a/src/components/SignInButtons/AppleSignIn/index.android.tsx b/src/components/SignInButtons/AppleSignIn/index.android.tsx
@@ -5,6 +5,7 @@ import Log from '@libs/Log';
 import * as Session from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
+import type {AppleSignInProps} from '.';
 
 /**
  * Apple Sign In Configuration for Android.
@@ -33,7 +34,7 @@ function appleSignInRequest(): Promise<string | undefined> {
 /**
  * Apple Sign In button for Android.
  */
-function AppleSignIn() {
+function AppleSignIn({onPress = () => {}}: AppleSignInProps) {
     const handleSignIn = () => {
         appleSignInRequest()
             .then((token) => Session.beginAppleSignIn(token))
@@ -46,7 +47,10 @@ function AppleSignIn() {
     };
     return (
         <IconButton
-            onPress={handleSignIn}
+            onPress={() => {
+                onPress();
+                handleSignIn();
+            }}
             provider={CONST.SIGN_IN_METHOD.APPLE}
         />
     );

diff --git a/src/components/SignInButtons/AppleSignIn/index.ios.tsx b/src/components/SignInButtons/AppleSignIn/index.ios.tsx
@@ -5,6 +5,7 @@ import IconButton from '@components/SignInButtons/IconButton';
 import Log from '@libs/Log';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
+import type {AppleSignInProps} from '.';
 
 /**
  * Apple Sign In method for iOS that returns identityToken.
@@ -32,7 +33,7 @@ function appleSignInRequest(): Promise<string | null | undefined> {
 /**
  * Apple Sign In button for iOS.
  */
-function AppleSignIn() {
+function AppleSignIn({onPress = () => {}}: AppleSignInProps) {
     const handleSignIn = () => {
         appleSignInRequest()
             .then((token) => Session.beginAppleSignIn(token))
@@ -45,7 +46,10 @@ function AppleSignIn() {
     };
     return (
         <IconButton
-            onPress={handleSignIn}
+            onPress={() => {
+                onPress();
+                handleSignIn();
+            }}
             provider={CONST.SIGN_IN_METHOD.APPLE}
         />
     );

diff --git a/src/components/SignInButtons/AppleSignIn/index.tsx b/src/components/SignInButtons/AppleSignIn/index.tsx
@@ -24,6 +24,8 @@ type SingletonAppleSignInButtonProps = AppleSignInDivProps & {
 
 type AppleSignInProps = WithNavigationFocusProps & {
     isDesktopFlow?: boolean;
+    // eslint-disable-next-line react/no-unused-prop-types
+    onPress?: () => void;
 };
 
 /**
@@ -139,3 +141,4 @@ function AppleSignIn({isDesktopFlow = false}: AppleSignInProps) {
 
 AppleSignIn.displayName = 'AppleSignIn';
 export default withNavigationFocus(AppleSignIn);
+export type {AppleSignInProps};
diff --git a/src/components/SignInButtons/GoogleSignIn/index.native.tsx b/src/components/SignInButtons/GoogleSignIn/index.native.tsx
@@ -5,6 +5,7 @@ import Log from '@libs/Log';
 import * as Session from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
+import type {GoogleSignInProps} from '.';
 
 /**
  * Google Sign In method for iOS and android that returns identityToken.
@@ -44,10 +45,13 @@ function googleSignInRequest() {
 /**
  * Google Sign In button for iOS.
  */
-function GoogleSignIn() {
+function GoogleSignIn({onPress = () => {}}: GoogleSignInProps) {
     return (
         <IconButton
-            onPress={googleSignInRequest}
+            onPress={() => {
+                onPress();
+                googleSignInRequest();
+            }}
             provider={CONST.SIGN_IN_METHOD.GOOGLE}
         />
     );

diff --git a/src/components/SignInButtons/GoogleSignIn/index.tsx b/src/components/SignInButtons/GoogleSignIn/index.tsx
@@ -9,6 +9,8 @@ import type Response from '@src/types/modules/google';
 
 type GoogleSignInProps = {
     isDesktopFlow?: boolean;
+    // eslint-disable-next-line react/no-unused-prop-types
+    onPress?: () => void;
 };
 
 /** Div IDs for styling the two different Google Sign-In buttons. */
@@ -90,3 +92,4 @@ function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) {
 GoogleSignIn.displayName = 'GoogleSignIn';
 
 export default GoogleSignIn;
+export type {GoogleSignInProps};
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx
@@ -26,7 +26,6 @@ import * as LoginUtils from '@libs/LoginUtils';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
-import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
 import * as CloseAccount from '@userActions/CloseAccount';
 import * as Session from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
@@ -51,8 +50,6 @@ type BaseLoginFormOnyxProps = {
 
 type BaseLoginFormProps = WithToggleVisibilityViewProps & BaseLoginFormOnyxProps & LoginFormProps;
 
-const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc();
-
 function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false, isVisible}: BaseLoginFormProps, ref: ForwardedRef<InputHandle>) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
@@ -215,6 +212,8 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
 
     const serverErrorText = useMemo(() => (account ? ErrorUtils.getLatestErrorMessage(account) : ''), [account]);
     const shouldShowServerError = !!serverErrorText && !formError;
+    const isSigningWithAppleOrGoogle = useRef(false);
+    const setIsSigningWithAppleOrGoogle = useCallback((isPressed: boolean) => (isSigningWithAppleOrGoogle.current = isPressed), []);
 
     return (
         <>
@@ -237,18 +236,15 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
                         // 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)
-                            : undefined
+                        () =>
+                            setTimeout(() => {
+                                if (isSigningWithAppleOrGoogle.current || firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) {
+                                    setIsSigningWithAppleOrGoogle(false);
+                                    return;
+                                }
+                                firstBlurred.current = true;
+                                validate(login);
+                            }, 500)
                     }
                     onChangeText={onTextInput}
                     onSubmitEditing={validateAndSubmitForm}
@@ -300,10 +296,10 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
 
                                     <View style={shouldUseNarrowLayout ? styles.loginButtonRowSmallScreen : styles.loginButtonRow}>
                                         <View>
-                                            <AppleSignIn />
+                                            <AppleSignIn onPress={() => setIsSigningWithAppleOrGoogle(true)} />
                                         </View>
                                         <View>
-                                            <GoogleSignIn />
+                                            <GoogleSignIn onPress={() => setIsSigningWithAppleOrGoogle(true)} />
                                         </View>
                                     </View>
                                 </View>