Web/Safari - 2FA - The 2FA page with the 6-digit code requested is not fully displayed

src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx

@@ -1,12 +1,15 @@
+import {useFocusEffect} from '@react-navigation/native';
 import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {AutoCompleteVariant, MagicCodeInputHandle} from '@components/MagicCodeInput';
 import MagicCodeInput from '@components/MagicCodeInput';
 import useLocalize from '@hooks/useLocalize';
+import {isMobileSafari} from '@libs/Browser';
 import {getLatestErrorMessage} from '@libs/ErrorUtils';
 import {isValidTwoFactorCode} from '@libs/ValidationUtils';
 import {clearAccountMessages, toggleTwoFactorAuth, validateTwoFactorAuth} from '@userActions/Session';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {BaseTwoFactorAuthFormRef} from './types';
 
@@ -77,8 +80,32 @@ function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable}: BaseTwo
             }
             inputRef.current.focus();
         },
+        focusLastSelected() {
+            if (!inputRef.current) {
+                return;
+            }
+            setTimeout(() => {
+                inputRef.current?.focusLastSelected();
+            }, CONST.ANIMATED_TRANSITION);
+        },
     }));
 
+    useFocusEffect(
+        useCallback(() => {
+            if (!inputRef.current) {
+                return;
+            }
+            // Keyboard won't show if we focus the input with a delay, so we need to focus immediately.
+            if (!isMobileSafari()) {
+                setTimeout(() => {
+                    inputRef.current?.focusLastSelected();
+                }, CONST.ANIMATED_TRANSITION);
+            } else {
+                inputRef.current?.focusLastSelected();
+            }
+        }, []),
+    );
+
     return (
         <MagicCodeInput
             autoComplete={autoComplete}
@@ -88,6 +115,7 @@ function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable}: BaseTwo
             onFulfill={validateAndSubmitForm}
             errorText={formError.twoFactorAuthCode ?? getLatestErrorMessage(account)}
             ref={inputRef}
+            autoFocus={false}
         />
     );
 }