diff --git a/src/components/SignInButtons/AppleSignIn/index.tsx b/src/components/SignInButtons/AppleSignIn/index.tsx
index 7ca0261d6c72..dc7ae48f3b57 100644
--- a/src/components/SignInButtons/AppleSignIn/index.tsx
+++ b/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}
/>
) : (
);
}
@@ -106,17 +110,22 @@ function AppleSignInDiv({isDesktopFlow}: AppleSignInDivProps) {
// 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 ;
+ return (
+
+ );
}
// 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 ;
+ return (
+
+ );
}
AppleSignIn.displayName = 'AppleSignIn';
diff --git a/src/components/SignInButtons/GoogleSignIn/index.tsx b/src/components/SignInButtons/GoogleSignIn/index.tsx
index f12d039209f5..c35fdb082487 100644
--- 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}: 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}
/>
) : (
@@ -84,6 +86,7 @@ function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) {
id={mainId}
role={CONST.ROLE.BUTTON}
aria-label={translate('common.signInWithGoogle')}
+ onPointerDown={onPointerDown}
/>
);
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx
index 2e762224f904..e93ff84ea1db 100644
--- 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 (
<>
- setIsSigningWithAppleOrGoogle(true)} />
+
- setIsSigningWithAppleOrGoogle(true)} />
+