Merge pull request #53109 from huult/52882-fix-apple-or-gmail-signin-email-field-error

fix resolve email field error after signing in with Apple or Gmai

Author: mjasikowski

src/components/SignInButtons/AppleSignIn/index.tsx

@@ -16,6 +16,7 @@ const getConfig = (config: NativeConfig, key: string, defaultValue: string) => (
 
 type AppleSignInDivProps = {
     isDesktopFlow: boolean;
+    onPointerDown?: () => void;
 };
 
 type SingletonAppleSignInButtonProps = AppleSignInDivProps & {
@@ -24,6 +25,7 @@ type SingletonAppleSignInButtonProps = AppleSignInDivProps & {
 
 type AppleSignInProps = WithNavigationFocusProps & {
     isDesktopFlow?: boolean;
+    onPointerDown?: () => void;
     // eslint-disable-next-line react/no-unused-prop-types
     onPress?: () => void;
 };
@@ -60,7 +62,7 @@ const failureListener = (event: AppleIDSignInOnFailureEvent) => {
 /**
  * Apple Sign In button for Web.
  */
-function AppleSignInDiv({isDesktopFlow}: AppleSignInDivProps) {
+function AppleSignInDiv({isDesktopFlow, onPointerDown}: AppleSignInDivProps) {
     useEffect(() => {
         // `init` renders the button, so it must be called after the div is
         // first mounted.
@@ -88,6 +90,7 @@ function AppleSignInDiv({isDesktopFlow}: AppleSignInDivProps) {
             data-width={CONST.SIGN_IN_FORM_WIDTH}
             data-height="52"
             style={{cursor: 'pointer'}}
+            onPointerDown={onPointerDown}
         />
     ) : (
         <div
@@ -99,24 +102,30 @@ function AppleSignInDiv({isDesktopFlow}: AppleSignInDivProps) {
             data-border-radius="50"
             data-size="40"
             style={{cursor: 'pointer'}}
+            onPointerDown={onPointerDown}
         />
     );
 }
 
 // The Sign in with Apple script may fail to render button if there are multiple
 // of these divs present in the app, as it matches based on div id. So we'll
 // only mount the div when it should be visible.
-function SingletonAppleSignInButton({isFocused, isDesktopFlow}: SingletonAppleSignInButtonProps) {
+function SingletonAppleSignInButton({isFocused, isDesktopFlow, onPointerDown}: SingletonAppleSignInButtonProps) {
     if (!isFocused) {
         return null;
     }
-    return <AppleSignInDiv isDesktopFlow={isDesktopFlow} />;
+    return (
+        <AppleSignInDiv
+            isDesktopFlow={isDesktopFlow}
+            onPointerDown={onPointerDown}
+        />
+    );
 }
 
 // withNavigationFocus is used to only render the button when it is visible.
 const SingletonAppleSignInButtonWithFocus = withNavigationFocus(SingletonAppleSignInButton);
 
-function AppleSignIn({isDesktopFlow = false}: AppleSignInProps) {
+function AppleSignIn({isDesktopFlow = false, onPointerDown}: AppleSignInProps) {
     const [scriptLoaded, setScriptLoaded] = useState(false);
     useEffect(() => {
         if (window.appleAuthScriptLoaded) {
@@ -136,7 +145,12 @@ function AppleSignIn({isDesktopFlow = false}: AppleSignInProps) {
         return null;
     }
 
-    return <SingletonAppleSignInButtonWithFocus isDesktopFlow={isDesktopFlow} />;
+    return (
+        <SingletonAppleSignInButtonWithFocus
+            isDesktopFlow={isDesktopFlow}
+            onPointerDown={onPointerDown}
+        />
+    );
 }
 
 AppleSignIn.displayName = 'AppleSignIn';

src/components/SignInButtons/GoogleSignIn/index.tsx

@@ -11,6 +11,7 @@ type GoogleSignInProps = {
     isDesktopFlow?: boolean;
     // eslint-disable-next-line react/no-unused-prop-types
     onPress?: () => void;
+    onPointerDown?: () => void;
 };
 
 /** Div IDs for styling the two different Google Sign-In buttons. */
@@ -27,7 +28,7 @@ const signIn = (response: Response) => {
  * @returns {React.Component}
  */
 
-function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) {
+function GoogleSignIn({isDesktopFlow = false, onPointerDown}: GoogleSignInProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const loadScript = useCallback(() => {
@@ -76,6 +77,7 @@ function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) {
                 id={desktopId}
                 role={CONST.ROLE.BUTTON}
                 aria-label={translate('common.signInWithGoogle')}
+                onPointerDown={onPointerDown}
             />
         </View>
     ) : (
@@ -84,6 +86,7 @@ function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) {
                 id={mainId}
                 role={CONST.ROLE.BUTTON}
                 aria-label={translate('common.signInWithGoogle')}
+                onPointerDown={onPointerDown}
             />
         </View>
     );

src/pages/signin/LoginForm/BaseLoginForm.tsx

@@ -220,6 +220,8 @@ function BaseLoginForm({login, onLoginChanged, blurOnSubmit = false, isVisible}:
         });
     }, []);
 
+    const handleSignIn = () => setIsSigningWithAppleOrGoogle(true);
+
     return (
         <>
             <View
@@ -305,10 +307,16 @@ function BaseLoginForm({login, onLoginChanged, blurOnSubmit = false, isVisible}:
 
                                     <View style={shouldUseNarrowLayout ? styles.loginButtonRowSmallScreen : styles.loginButtonRow}>
                                         <View>
-                                            <AppleSignIn onPress={() => setIsSigningWithAppleOrGoogle(true)} />
+                                            <AppleSignIn
+                                                onPress={handleSignIn}
+                                                onPointerDown={handleSignIn}
+                                            />
                                         </View>
                                         <View>
-                                            <GoogleSignIn onPress={() => setIsSigningWithAppleOrGoogle(true)} />
+                                            <GoogleSignIn
+                                                onPress={handleSignIn}
+                                                onPointerDown={handleSignIn}
+                                            />
                                         </View>
                                     </View>
                                 </View>