Update onPress to onPointerDown

Expensify · Nov 28, 2024 · de3437c · de3437c
1 parent 8fe4bc1
commit de3437c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/src/components/SignInButtons/AppleSignIn/index.tsx b/src/components/SignInButtons/AppleSignIn/index.tsx
@@ -16,16 +16,16 @@ const getConfig = (config: NativeConfig, key: string, defaultValue: string) => (
 
 type AppleSignInDivProps = {
     isDesktopFlow: boolean;
-    onPress?: () => void;
+    onPointerDown?: () => void;
 };
 
 type SingletonAppleSignInButtonProps = AppleSignInDivProps & {
     isFocused: boolean;
-    onPress?: () => void;
 };
 
 type AppleSignInProps = WithNavigationFocusProps & {
     isDesktopFlow?: boolean;
+    onPointerDown?: () => void;
     // eslint-disable-next-line react/no-unused-prop-types
     onPress?: () => void;
 };
@@ -62,7 +62,7 @@ const failureListener = (event: AppleIDSignInOnFailureEvent) => {
 /**
  * Apple Sign In button for Web.
  */
-function AppleSignInDiv({isDesktopFlow, onPress}: AppleSignInDivProps) {
+function AppleSignInDiv({isDesktopFlow, onPointerDown}: AppleSignInDivProps) {
     useEffect(() => {
         // `init` renders the button, so it must be called after the div is
         // first mounted.
@@ -90,7 +90,7 @@ function AppleSignInDiv({isDesktopFlow, onPress}: AppleSignInDivProps) {
             data-width={CONST.SIGN_IN_FORM_WIDTH}
             data-height="52"
             style={{cursor: 'pointer'}}
-            onPointerDown={onPress}
+            onPointerDown={onPointerDown}
         />
     ) : (
         <div
@@ -102,30 +102,30 @@ function AppleSignInDiv({isDesktopFlow, onPress}: AppleSignInDivProps) {
             data-border-radius="50"
             data-size="40"
             style={{cursor: 'pointer'}}
-            onPointerDown={onPress}
+            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, onPress}: SingletonAppleSignInButtonProps) {
+function SingletonAppleSignInButton({isFocused, isDesktopFlow, onPointerDown}: SingletonAppleSignInButtonProps) {
     if (!isFocused) {
         return null;
     }
     return (
         <AppleSignInDiv
             isDesktopFlow={isDesktopFlow}
-            onPress={onPress}
+            onPointerDown={onPointerDown}
         />
     );
 }
 
 // withNavigationFocus is used to only render the button when it is visible.
 const SingletonAppleSignInButtonWithFocus = withNavigationFocus(SingletonAppleSignInButton);
 
-function AppleSignIn({isDesktopFlow = false, onPress}: AppleSignInProps) {
+function AppleSignIn({isDesktopFlow = false, onPointerDown}: AppleSignInProps) {
     const [scriptLoaded, setScriptLoaded] = useState(false);
     useEffect(() => {
         if (window.appleAuthScriptLoaded) {
@@ -148,7 +148,7 @@ function AppleSignIn({isDesktopFlow = false, onPress}: AppleSignInProps) {
     return (
         <SingletonAppleSignInButtonWithFocus
             isDesktopFlow={isDesktopFlow}
-            onPress={onPress}
+            onPointerDown={onPointerDown}
         />
     );
 }

diff --git a/src/components/SignInButtons/GoogleSignIn/index.tsx b/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, onPress}: GoogleSignInProps) {
+function GoogleSignIn({isDesktopFlow = false, onPointerDown}: GoogleSignInProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const loadScript = useCallback(() => {
@@ -76,7 +77,7 @@ function GoogleSignIn({isDesktopFlow = false, onPress}: GoogleSignInProps) {
                 id={desktopId}
                 role={CONST.ROLE.BUTTON}
                 aria-label={translate('common.signInWithGoogle')}
-                onPointerDown={onPress}
+                onPointerDown={onPointerDown}
             />
         </View>
     ) : (
@@ -85,7 +86,7 @@ function GoogleSignIn({isDesktopFlow = false, onPress}: GoogleSignInProps) {
                 id={mainId}
                 role={CONST.ROLE.BUTTON}
                 aria-label={translate('common.signInWithGoogle')}
-                onPointerDown={onPress}
+                onPointerDown={onPointerDown}
             />
         </View>
     );

diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/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>