[Due for payment 2026-02-23] [$300] mWeb - User settings - Hidden field for entering six-digit code in 2factor authentication

[lanitochka17]

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: 9.2.59-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: User is logged in

1. Navigate to https://staging.new.expensify.com/
2. Tap on "Account" tab
3. Tap on "Security"
4. Tap on "Two-factor authentication"
5. Copy recovery codes and tap on next
6. Tap on field for entering six-digit code

Expected Result:

When user tap on field for entering six-digit code, the field should be visible

Actual Result:

After user tap on field for entering six-digit code, it disappears and only "next" button is displayed. To unhide it user has to type some numbers and confirm it by tapping "checkmark" above numpad

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug7004172_1763146402632.video-output-07B193EA-7A90-4F91-AEC3-3F5E4A79533C-1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021990595815042833876
• Upwork Job ID: 1990595815042833876
• Last Price Increase: 2026-01-12
• Automatic offers:
• situchan | Reviewer | 110360290

Issue Owner

Current Issue Owner: @brianlee-expensify

[melvin-bot]

Triggered auto assignment to @brianlee-expensify (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.

[abbasifaizan70]

Proposal

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

On iOS Safari (mWeb), when a user navigates to the two-factor authentication verification page and taps on the six-digit code input field, the input field disappears from view. Only the "Next" button remains visible. The user must type numbers and tap the checkmark above the numpad to make the input field visible again.

What is the root cause of that problem?

The issue occurs because:

1. Insufficient scrollable space: The ScrollView doesn't have enough bottom padding to account for the FixedFooter height. When the keyboard opens and the viewport shrinks, there isn't enough scrollable content to position the input field above the footer.

2. FixedFooter positioning: The FixedFooter component is positioned at the bottom of the screen. When the keyboard opens, the KeyboardAvoidingView moves it above the keyboard, but the ScrollView content doesn't have enough padding to ensure the input field remains visible above the footer.

3. Missing scroll on focus: When the input field gains focus, the ScrollView doesn't automatically scroll to position the input field above the FixedFooter, causing it to be hidden behind the footer when the keyboard appears.

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

1. Add bottom padding to ScrollView: Add sufficient bottom padding (styles.pb20 = 80px) to the ScrollView's contentContainerStyle to reserve space for the FixedFooter component. This ensures there's enough scrollable content to position the input field above the footer when the keyboard opens.

File: src/pages/settings/Security/TwoFactorAuth/VerifyPage.tsx

Add bottom padding to ScrollView contentContainerStyle:

import {isMobileSafari} from '@libs/Browser';

<ScrollView
    ref={scrollViewRef}
    keyboardShouldPersistTaps="handled"
    contentContainerStyle={[styles.flexGrow1, isMobileSafari() && styles.pb20]}
>

The styles.pb20 (80px) padding is only applied on iOS Safari using isMobileSafari() && styles.pb20. This creates enough scrollable space to accommodate the FixedFooter on the platform where the issue occurs, without adding unnecessary padding on other platforms.

What alternative solutions did you explore? (Optional)

N/A

[ShridharGoel]

Proposal

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

When setting up two-factor authentication, tapping the 6-digit code field on mWeb hides the field and leaving only the Next button visible.

What is the root cause of that problem?

The Verify step scroll handler unconditionally called scrollToEnd, which always moves the ScrollView all the way down whenever the input gains focus. Because the 6-digit field sits above the footer, scrolling to the end pushes it under the keyboard.

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

Lines 76 to 88 in 4c1d026

	const scrollViewRef = useRef<RNScrollView>(null);
	const handleInputFocus = useCallback(() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	requestAnimationFrame(() => {
	scrollViewRef.current?.scrollToEnd({animated: true});
	});
	});
	}, []);
	return (
	<TwoFactorAuthWrapper
	stepName={CONST.TWO_FACTOR_AUTH_STEPS.VERIFY}

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

Track the vertical position of the code form, and when the input is focused scroll directly to that offset instead of the bottom. This keeps the field in view while still moving the ScrollView enough to display it above the keyboard.

const scrollViewRef = useRef<RNScrollView>(null);
const formLayoutY = useRef(0);

const handleInputFocus = useCallback(() => {
    InteractionManager.runAfterInteractions(() => {
        requestAnimationFrame(() => {
            if (!scrollViewRef.current) {
                return;
            }
            scrollViewRef.current.scrollTo({y: formLayoutY.current, animated: true});
        });
    });
}, []);

const handleFormLayout = useCallback((event: LayoutChangeEvent) => {
    formLayoutY.current = event.nativeEvent.layout.y;
}, []);

<View
    style={[styles.mh5, styles.mb4, styles.mt3]}
    onLayout={handleFormLayout}
>
    <TwoFactorAuthForm
        innerRef={formRef}
        shouldAutoFocusOnMobile={false}
        onFocus={handleInputFocus}
    />
</View>

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021990595815042833876