mWeb - Onboarding - “Add work email” button is unresponsive

[jponikarchuk]

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.1.29-9
Reproducible in staging?: Yes
Reproducible in production?: Unable to check, new feature
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #60461
Email or phone of affected tester (no customers): Applausetester+uo0407@applause.Expensifail.com
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro / Safari
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new Gmail account.
3. Enter a private domain email address that already exists
   4 Tap add work email.

Expected Result:

User is able to add work email and is sent to screen to validate email

Actual Result:

Tapping “add work email button” does nothing

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-18 12:07:36 UTC.

Proposal

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

mWeb - Onboarding - “Add work email” button is unresponsive

What is the root cause of that problem?

I think the root cause is when the potential user taps on add work email button here

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Line 139 in 92707c3

onSubmit={submitWorkEmail}

submitWorkEmail function is triggered and API is called ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM here

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Lines 82 to 84 in 92707c3

	const submitWorkEmail = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM>) => {
	AddWorkEmail(values[INPUT_IDS.ONBOARDING_WORK_EMAIL]);
	}, []);

where addWorkEmail() is called from actions ie. INPUT_IDS.ONBOARDING_WORK_EMAIL matches with this inputID

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Line 214 in 92707c3

inputID={INPUT_IDS.ONBOARDING_WORK_EMAIL}

This is a Platform specific problem mWeb:chrome && mWeb:safari. The main potential suspect is keyboard overlap + touch event blockage on mobile web.

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

We should apply the following changes:

1. Add shouldEnableKeyboardAvoidingView in ScreenWrapper props

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Lines 124 to 130 in 92707c3

	<ScreenWrapper
	shouldEnableMaxHeight
	shouldShowOfflineIndicator={false}
	includeSafeAreaPaddingBottom={isOffline}
	testID="BaseOnboardingWorkEmail"
	style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
	>

2. Add shouldKeyboardOffsetBottomSafeAreaPadding
   in ScreenWrapper props here

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Lines 124 to 130 in 92707c3

	<ScreenWrapper
	shouldEnableMaxHeight
	shouldShowOfflineIndicator={false}
	includeSafeAreaPaddingBottom={isOffline}
	testID="BaseOnboardingWorkEmail"
	style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
	>

3. Update submitWorkEmail function here

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Lines 82 to 84 in 92707c3

	const submitWorkEmail = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM>) => {
	AddWorkEmail(values[INPUT_IDS.ONBOARDING_WORK_EMAIL]);
	}, []);

with

const updatedSubmitWorkEmail = useCallback(
        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM>) => {
            if (isMobileChrome || isMobileSafari) {
    
                setTimeout(() => AddWorkEmail(values[INPUT_IDS.ONBOARDING_WORK_EMAIL]), 100); // add delay
            } else {
                AddWorkEmail(values[INPUT_IDS.ONBOARDING_WORK_EMAIL]);
            }
        },
        [AddWorkEmail],
    );

and replace onSubmit accordingly

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Line 139 in 92707c3

onSubmit={submitWorkEmail}

with

onSubmit={updatedSubmitWorkEmail}

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

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Triggered auto assignment to @MarioExpensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.