[Due for payment 2025-04-28] [Due for payment 2025-04-25] [$0] Onboarding - Unable to enter long email on work email field

[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.1.29-0
Reproducible in staging?: Y
Reproducible in production?: N
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: #54186
Email or phone of affected tester (no customers): djidjidjdijdid@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new Gmail account.
3. On work email page, enter a long email (this is an existing account - applausetester+khcategory18@applause.expensifail.com
   ).

Expected Result:

User should be able to enter long emali on work email field. The provided email above is not excessively lon

Actual Result:

User is not able to enter long emali on work email field

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6804301_1744841013895.20250417_060048.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021912642606638519735
• Upwork Job ID: 1912642606638519735
• Last Price Increase: 2025-04-16
• Automatic offers:
• ikevin127 | Contributor | 106953592

Issue Owner

Current Issue Owner: @Ollyws

[melvin-bot]

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

[ChavdaSachin]

Proposal

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

Onboarding - Unable to enter long email on work email field

What is the root cause of that problem?

We have applied max length limit here.

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Line 217 in 0591b9c

maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}

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

Pass appropriate max length or remove the limit.

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)

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.

[github-actions]

⚠️ Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[nabi-ebrahimi]

Proposal

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

Users are currently unable to enter long email addresses into the "work email" field during onboarding. This is likely frustrating for users with longer domains or names in their email addresses, preventing them from completing the onboarding process smoothly.

What is the root cause of that problem?

The root cause is likely the use of maxLength={CONST.DISPLAY_NAME.MAX_LENGTH} on the work email input field. CONST.DISPLAY_NAME.MAX_LENGTH is probably intended for limiting display names, not email addresses. If this constant is set to a low value (e.g., 50 characters), it would incorrectly limit the input length for emails, which can often exceed that.

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

We should replace CONST.DISPLAY_NAME.MAX_LENGTH with a more appropriate constant for email input, such as CONST.EMAIL.MAX_LENGTH, and set its value to 320 to support the full length of valid email addresses.

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

Here are some scenarios to cover:

• ✅ A user can input a valid long email address up to 320 characters.
• 🚫 Input is correctly truncated or rejected when it exceeds the max length (e.g., 321+ characters).
• ✍️ Input persists correctly when saved and retrieved as a draft.
• 📱 The behavior is consistent across platforms (iOS, Android, Web).
• 🔁 A regression test to confirm the maxLength used for email input is not mistakenly tied to unrelated constants (like display name).

What alternative solutions did you explore? (Optional)

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.

[cead22]

Here's the offending PR. I pinged the author and reviewer on slack to see if they can quickly fix it

[ChavdaSachin]

I checked NewContactMethod page and we don't generally use a character limit for email so we should probably remove the limit here.

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

Lines 163 to 173 in 0591b9c

	<InputWrapper
	InputComponent={TextInput}
	label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
	aria-label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
	role={CONST.ROLE.PRESENTATION}
	inputMode={CONST.INPUT_MODE.EMAIL}
	ref={loginInputRef}
	inputID={INPUT_IDS.PHONE_OR_EMAIL}
	autoCapitalize="none"
	enterKeyHint="done"
	/>

[nyomanjyotisa]

Proposal

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

Onboarding - Unable to enter long email on work email field

What is the root cause of that problem?

We set the maxLength to 50 on the work email field

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Line 217 in 0591b9c

maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}

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

We should remove the current maxLength, and add a validation to show an error if exeed the CONST.LOGIN_CHARACTER_LIMIT which is 254 chars (to make it consistent with other email input field)

Additionally add validation to show error if the work email field is empty, since it is required

Add the following here

        if (!userEmail) {
            addErrorMessage(errors, INPUT_IDS.ONBOARDING_WORK_EMAIL, translate('contacts.workEmailValidationError.required'));
        } else if (userEmail.length > CONST.LOGIN_CHARACTER_LIMIT) {
            addErrorMessage(
                errors,
                INPUT_IDS.ONBOARDING_WORK_EMAIL,
                translate('common.error.characterLimitExceedCounter', {
                    length: userEmail.length,
                    limit: CONST.LOGIN_CHARACTER_LIMIT,
                }),
            );
        }

Might need to create new copy for contacts.workEmailValidationError.required

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

N/A

What alternative solutions did you explore? (Optional)

N/A