[Due for payment 2025-07-14] [$250] Web/Safari - 2FA - The 2FA page with the 6-digit code requested is not fully displayed

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.68-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: n/a
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Device used: Mac 15.4.1/Safari
App Component: User Settings

Action Performed:

1. Navigate to https://staging.new.expensify.com
2. Navigate to Security > Two-factor authentication
3. Click Copy
4. Click Next

Expected Result:

The 2FA verifying page is fully displayed when enabling 2FA.

Actual Result:

The 2FA page with the 6-digit code requested is not fully displayed when enabling 2FA. The page appears after clicking any button. Sometimes the page is blank

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6863140_1750209548925.Recording__154__2_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021937157228038614428
• Upwork Job ID: 1937157228038614428
• Last Price Increase: 2025-06-23
• Automatic offers:
• thelullabyy | Contributor | 107825562

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nabi-ebrahimi]

Proposal

Please re-state the problem that we are trying to solve in this issue.

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

What is the root cause of that problem?

Safari handles input focus poorly when:

• The input is inside an absolutely positioned element (e.g., a fixed footer).

App/src/pages/settings/Security/TwoFactorAuth/VerifyPage.tsx

Lines 120 to 136 in f6efb52

	<FixedFooter style={[styles.mt2, styles.pt2]}>
	<View style={[styles.mh5, styles.mb4]}>
	<TwoFactorAuthForm innerRef={formRef} />
	</View>
	<Button
	success
	large
	text={translate('common.next')}
	isLoading={account?.isLoading}
	onPress={() => {
	if (!formRef.current) {
	return;
	}
	formRef.current.validateAndSubmitForm();
	}}
	/>
	</FixedFooter>

• The page includes a scrollable container such as a ScrollView.

App/src/pages/settings/Security/TwoFactorAuth/VerifyPage.tsx

Lines 84 to 119 in f6efb52

	<ScrollView
	keyboardShouldPersistTaps="handled"
	contentContainerStyle={styles.flexGrow1}
	>
	<View style={[styles.ph5, styles.mt3]}>
	<Text>
	{translate('twoFactorAuth.scanCode')}
	<TextLink href={TROUBLESHOOTING_LINK}> {translate('twoFactorAuth.authenticatorApp')}</TextLink>.
	</Text>
	<View style={[styles.alignItemsCenter, styles.mt5]}>
	<QRCode
	url={buildAuthenticatorUrl()}
	logo={expensifyLogo}
	logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
	logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}
	/>
	</View>
	<Text style={styles.mt5}>{translate('twoFactorAuth.addKey')}</Text>
	<View style={[styles.mt11, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
	{!!account?.twoFactorAuthSecretKey && <Text>{splitSecretInChunks(account?.twoFactorAuthSecretKey ?? '')}</Text>}
	<PressableWithDelayToggle
	text={translate('twoFactorAuth.copy')}
	textChecked={translate('common.copied')}
	tooltipText=""
	tooltipTextChecked=""
	icon={Expensicons.Copy}
	inline={false}
	onPress={() => Clipboard.setString(account?.twoFactorAuthSecretKey ?? '')}
	styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCopyCodeButton]}
	textStyles={[styles.buttonMediumText]}
	accessible={false}
	/>
	</View>
	<Text style={styles.mt11}>{translate('twoFactorAuth.enterCode')}</Text>
	</View>
	</ScrollView>

• An input is auto-focused immediately after navigation.

App/src/components/MagicCodeInput.tsx

Line 399 in f6efb52

autoFocus={autoFocus}

In these cases, Safari tries to scroll the input into view but miscalculates the horizontal position, causing a phantom horizontal scroll and layout shift.

What changes do you think we should make in order to solve the problem?

We should avoid using autoFocus directly in JSX for Safari. Instead, detect Safari using the user agent and manually focus the input with a short delay to allow the layout to stabilize after navigation. This prevents Safari from performing its buggy scroll behavior.

Example fix:

   const onFocus = () => {
        if (!shouldFocusLast.current) {
            return;
        }

        lastValue.current = TEXT_INPUT_EMPTY_STATE;
        setInputAndIndex(lastFocusedIndex.current);
    };


    useEffect(() => {
        if (!autoFocus) {
            return;
        }
        const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
        if (isSafari) {
            setTimeout(() => {
                onFocus();
                inputRef.current?.focus(); // innerRef from props
            }, 300); // give time for layout to settle
        } else {
            onFocus();
            inputRef.current?.focus();
        }
    }, []);

and remove the autoFocus={autoFocus} and onFocus={onFocus} props from TextInput.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[twisterdotcom]

Following my advice here: #63663 (comment).

This appears to be an exploitative bug, not one linked to a PR, regression test or customer report, so likely closing.

[twisterdotcom]

Hmm, this one is pretty bad actually right?

[melvin-bot]

@isabelastisser Whoops! This issue is 2 days overdue. Let's get this updated quick!