diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 425960078b0a..9c9e0b020aa6 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -16,6 +16,7 @@ import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as Browser from '@libs/Browser'; import * as ErrorUtils from '@libs/ErrorUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import * as User from '@userActions/User'; @@ -120,9 +121,16 @@ function BaseValidateCodeForm({ if (focusTimeoutRef.current) { clearTimeout(focusTimeoutRef.current); } - focusTimeoutRef.current = setTimeout(() => { + + // Keyboard won't show if we focus the input with a delay, so we need to focus immediately. + if (!Browser.isMobileSafari()) { + focusTimeoutRef.current = setTimeout(() => { + inputValidateCodeRef.current?.focusLastSelected(); + }, CONST.ANIMATED_TRANSITION); + } else { inputValidateCodeRef.current?.focusLastSelected(); - }, CONST.ANIMATED_TRANSITION); + } + return () => { if (!focusTimeoutRef.current) { return; @@ -205,7 +213,7 @@ function BaseValidateCodeForm({ errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})} hasError={!isEmptyObject(validateError)} onFulfill={validateAndSubmitForm} - autoFocus + autoFocus={false} /> {shouldShowTimer && (