Profile - Using \u200D as a first/last name is not treated like it’s empty but shown blank

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.3.84-0

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

Issue found when executing PR #28821

Action Performed:

1. Launch new expensify logged in
2. Go to Settings from the LHN
3. Select Profile
4. Select Display name
5. Enter as both names unicode character \u200D (you can use http://www.unicode-symbol.com/u/200D.html
   to copy it and paste in the fields)
6. Save the name

Expected Result:

It should be saved, but the name will be treated as empty so the email of the account should be shown

Actual Result:

The name is shown as blank as the character is saved but since it's invisible it won't appear as a name

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Bug6238179_1697400812355.RPReplay_Final1697313271.mp4

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Recording.1628.mp4

MacOS: Desktop

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[honnamkuan]

Proposal

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

zero width unicode characters can be entered into First name & Last name fields, causing Display name to be shown as "empty" instead of falling back to login email, both only zero width characters are filled in the names fields.

What is the root cause of that problem?

We are trimming the firstName and lastName at

App/src/pages/settings/Profile/DisplayNamePage.js

Lines 42 to 44 in 0e64161

	const updateDisplayName = (values) => {
	PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim());
	};

However trim does not remove zero width unicode characters.

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

To update the trimming logic before saving values of firstName and lastName, by removing zero width unicode characters listed below:

200B - ZERO WIDTH SPACE
200C - ZERO WIDTH NON-JOINER
200D - ZERO WIDTH JOINER
200E - LEFT-TO-RIGHT MARK
200F - RIGHT-TO-LEFT MARK

So that input having just the zero width character will be "trimmed" to empty string, and Display Name will fallback to login email instead of empty.

What alternative solutions did you explore? (Optional)

Add input validation to validate First name and Last name does not contains invalid characters (including zero space unicode chars) before allow savings.
However this might not be ideal because user might get confused what went wrong as they cannot see if zero width character from the field display.

[dhanashree-sawant]

Similar reported issue:
https://expensify.slack.com/archives/C049HHMV9SM/p1689924356563269

[MitchExpensify]

Without a screenshot or recording I am closing this

[lanitochka17]

@MitchExpensify Hello
The video has been added to the Screenshots/Videos tab

[MitchExpensify]

Sorry for missing that @lanitochka17 and thanks for pointing where to look 👀

[MitchExpensify]

I don't quite follow how this will hurt user experience so closing as such