[Due for payment 2025-06-16] [Due for payment 2025-06-13] [$250] Sign in - Email copied from expense header whisper message is not parsed on login page

[nlemma]

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.51-9
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Device used: Windows 11 / Chrome, MacOS Big Sur
App Component: Other

Action Performed:

Precondition: workspace with 2 users: Owner and employee.

1. Employee submits expense in ws chat
2. Enter expense details and copy Owner (approver) email from expense header whisper message
3. Paste email on Login page (you can open it in incognito)
4. Click Continue

Expected Result:

Email is parsed. Window for enter Magic code opens.

Actual Result:

An error appears 'The email entered is invalid. Please fix the format and try again.'

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

Bug6843580_1748348829136.bandicam_2025-05-27_15-17-24-141.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021927363862090516869
• Upwork Job ID: 1927363862090516869
• Last Price Increase: 2025-05-27

Issue Owner

Current Issue Owner: @maddylewis

[melvin-bot]

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

[bernhardoj]

Proposal

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

Copying email from next step and then use it in login page throws invalid error.

What is the root cause of that problem?

The email in next step is appended with a zero-width space (ZWS).

App/src/libs/EmailUtils.ts

Lines 22 to 28 in 0f2d070

	function prefixMailSeparatorsWithBreakOpportunities(email: string) {
	return email.replace(
	/([.@])/g,
	// below: zero-width space (U+200B) character
	'​$1',
	);
	}

We previously fixed this in #34437 by removing the ZWS when copying it. It does that by checking if the text parent is a tag with id of email-with-break-opportunities.

App/src/libs/SelectionScraper/index.ts

Lines 115 to 117 in 0f2d070

	if (dom.parent instanceof Element && dom.parent?.attribs?.id === 'email-with-break-opportunities') {
	data = data.replaceAll('\u200b', '');
	}

The next step email indeed has the ID set. However, the parent of the text is not this.

App/src/components/HTMLEngineProvider/HTMLRenderers/NextStepEmailRenderer.tsx

Lines 6 to 11 in 0f2d070

	function NextStepEmailRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
	const styles = useThemeStyles();
	return (
	<Text
	nativeID="email-with-break-opportunities"

In SelectionScraper, we get the parent from the closest tag with data-testid attribute. In this case, it's the div with next-step id.

App/src/libs/SelectionScraper/index.ts

Lines 70 to 85 in 0f2d070

	if (range.commonAncestorContainer instanceof HTMLElement) {
	parent = range.commonAncestorContainer.closest(`[${tagAttribute}]`);
	} else {
	parent = (range.commonAncestorContainer.parentNode as HTMLElement | null)?.closest(`[${tagAttribute}]`) ?? null;
	}
	// Keep traversing up to clone all parents with 'data-testid' attribute.
	while (parent) {
	const cloned = parent.cloneNode();
	cloned.appendChild(child);
	child = cloned as DocumentFragment;
	parent = (parent.parentNode as HTMLElement | null)?.closest(`[${tagAttribute}]`) ?? null;
	}
	div.appendChild(child);

They previously used data-testid, but were requested to change to nativeID. QA also commented that the issue still happens.

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

We should use data-testid back instead of nativeID in next step email renderer.

<Text
    testID="email-with-break-opportunities"

And update the condition to clear the ZWS by checking the data-testid (tagAttribute)

if (dom.parent instanceof Element && dom.parent?.attribs?.[tagAttribute] === 'email-with-break-opportunities') {
    data = data.replaceAll('\u200b', '');
}

Basically, we revert this commit.

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

N/A

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Pujan92 (External)

[Pujan92]

@bernhardoj's RCA and solution of using testID here make sense. We can proceed with their solution.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @Beamanator, see https://stackoverflow.com/c/expensify/questions/7972 for more details.