diff --git a/src/components/SignInButtons/AppleSignIn/index.android.tsx b/src/components/SignInButtons/AppleSignIn/index.android.tsx index ec669590d029..a528fe7c5a10 100644 --- 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 { /** * 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 ( { + 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 index 4df8375edad8..57aae97b9c48 100644 --- 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 { /** * 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 ( { + onPress(); + handleSignIn(); + }} provider={CONST.SIGN_IN_METHOD.APPLE} /> ); diff --git a/src/components/SignInButtons/AppleSignIn/index.tsx b/src/components/SignInButtons/AppleSignIn/index.tsx index 9d7322878c98..7ca0261d6c72 100644 --- 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 index 2744d8958080..3fac942c1279 100644 --- 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 ( { + onPress(); + googleSignInRequest(); + }} provider={CONST.SIGN_IN_METHOD.GOOGLE} /> ); diff --git a/src/components/SignInButtons/GoogleSignIn/index.tsx b/src/components/SignInButtons/GoogleSignIn/index.tsx index 3cc4cdebffa6..f12d039209f5 100644 --- 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 index 4286a2603341..d707600b77cd 100644 --- 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) { 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 - + setIsSigningWithAppleOrGoogle(true)} /> - + setIsSigningWithAppleOrGoogle(true)} />