Profile - Display name field displays live mark down when entering text with mark down

[IuliiaHerets]

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: 9.0.69-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Account settings > Profile.
3. Click Display name.
4. Enter text with mark down in name field.

Expected Result:

The name field should not display live mark down because mark down is not supported for display name.

Actual Result:

The name field displays live mark down when entering text with mark down.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6680737_1732981667641.20241130_234521.mp4

View all open jobs on GitHub

[melvin-bot]

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

[Themoonalsofall]

Edited by proposal-police: This proposal was edited at 2024-11-30 19:38:54 UTC.

Proposal

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

Display name field displays live mark down when entering text with mark down

What is the root cause of that problem?

We pass isMarkdownEnabled as true in first name input and last name input

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

Lines 92 to 101 in 3cc88f5

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.FIRST_NAME}
	name="fname"
	label={translate('common.firstName')}
	aria-label={translate('common.firstName')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={currentUserDetails.firstName ?? ''}
	spellCheck={false}
	isMarkdownEnabled

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

We can remove isMarkdownEnabled props in first name input and last name input

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

Lines 92 to 101 in 3cc88f5

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.FIRST_NAME}
	name="fname"
	label={translate('common.firstName')}
	aria-label={translate('common.firstName')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={currentUserDetails.firstName ?? ''}
	spellCheck={false}
	isMarkdownEnabled

We can check if other inputs have the same problem and fix them

What alternative solutions did you explore? (Optional)