[$250] Expense, task, room - Unable to create a new line in description field with SHIFT+Enter

[IuliiaHerets]

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.0.37-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to chat.
3. Click + > Submit expense > Manual.
4. Enter amount > Next.
5. Click Description.
6. Press SHIFT+ENTER (enter key for mweb).

Expected Result:

A new line will be created with SHIFT+ENTER.

Actual Result:

A new line is not created with SHIFT+ENTER. The description is saved instead.

This issue happens in IOU, task and room description.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6607157_1726619223526.20240918_082254.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836355229392782754
• Upwork Job ID: 1836355229392782754
• Last Price Increase: 2024-09-18
• Automatic offers:
• DylanDylann | Reviewer | 104086887
• nkdengineer | Contributor | 104086888

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot]

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

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-control

[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.

[etCoderDysto]

This might have the same RCA with #49368

[nkdengineer]

I think the RCA is not the same.

[cead22]

Thanks @etCoderDysto. Can you check if you can reproduce this using the branch for this PR #49370?

[cead22]

I don't think this needs to block the deploy

[etCoderDysto]

Thanks @etCoderDysto. Can you check if you can reproduce this using the branch for this PR #49370?

Sure! I am checking now...

[etCoderDysto]

@cead22 I am able to reproduce the issue on this branch #49370. The issues are not related.

Screen.Recording.2024-09-18.at.1.03.47.in.the.afternoon.mp4

[cead22]

Thank you! Feel free to submit a proposal

[melvin-bot]

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

[melvin-bot]

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

[DylanDylann]

Anyways, I see the original bug still happen

Screen.Recording.2024-09-18.at.21.05.02.mov

[luacmartins]

Oh weird, I'm seeing the issue again but now it navigates back @Skalakid since you worked on the PR.

[nkdengineer]

Proposal

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

A new line is not created with SHIFT+ENTER. The description is saved instead.

What is the root cause of that problem?

The markdown input is a div component with role textarea

Then shouldDisableEnterShortcut is false

App/src/components/Button/index.tsx

Line 152 in f7a4aa1

const shouldDisableEnterShortcut = useMemo(() => accessibilityRoles.includes(activeElementRole ?? '') && activeElementRole !== CONST.ROLE.PRESENTATION, [activeElementRole]);

and this check is passed because the nodeName is DIV

App/src/components/Button/validateSubmitShortcut/index.ts

Lines 13 to 17 in f7a4aa1

	const eventTarget = event?.target as HTMLElement;
	if (isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA') {
	return false;
	}

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

We can add TEXTAREA role to CONST.ROLE

Or we can return false here if the eventTarget.role is textarea

if (isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA' || eventTarget.role === 'textarea') {
    return false;
}

App/src/components/Button/validateSubmitShortcut/index.ts

Lines 13 to 17 in f7a4aa1

	const eventTarget = event?.target as HTMLElement;
	if (isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA') {
	return false;
	}

What alternative solutions did you explore? (Optional)

[Skalakid]

Oh, okay, my PR fixed the issue inside the main chat Composer and all other inputs that appear on the main panel. Inputs in task, expense, and room pages are still broken

[Skalakid]

@nkdengineer, thanks for the proposal, to make it work, we should change the condition to eventTarget.role === 'textbox'. textarea role isn't applied for this eventTarget in the task page. However, I think putting the condition eventTarget?.contentEditable would be better because it's more generic and will work with any contentEditable element, not just Live Markdown Input. @DylanDylann @luacmartins what do you think about it?

if (isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA' || eventTarget?.contentEditable) {
    return false;
}

[nkdengineer]

thanks for the proposal, to make it work, we should change the condition to eventTarget.role === 'textbox'

@Skalakid Thanks for your feedback, this is the result when I log the eventTarget.role here for markdown input.

App/src/components/Button/validateSubmitShortcut/index.ts

Line 13 in f7a4aa1

const eventTarget = event?.target as HTMLElement;

Screen.Recording.2024-09-19.at.15.20.37.mov

However, I think putting the condition eventTarget?.contentEditable would be better because it's more generic and will
work with any contentEditable element, not just Live Markdown Input

Checking eventTarget?.contentEditable may be incorrect, for example in the image below, I logged the contentEditable of a normal TextInput and if it still exists then that will prevent the enter to submitting the form if we're focusing on a single line input. Instead, I think we can check eventTarget.ariaMultiLine or (eventTarget?.contentEditable && eventTarget.ariaMultiLine

[Skalakid]

@nkdengineer Oh okay so we can just add eventTarget?.contentEditable === 'true' and it will work with TextInput components as well

[nkdengineer]

@Skalakid I think that is also an idea.

[DylanDylann]

IMO both ways look fine 😄:

1. Using eventTarget.ariaMultiLine
2. Using eventTarget?.contentEditable === 'true'

@luacmartins Who will take care of this issue next? 😄 I think we can go with @nkdengineer's proposal

[melvin-bot]

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

[miljakljajic]

@slafortune thank you for taking this one over as I start my parental leave.

@luacmartins @cead22 will we be going with @nkdengineer 's proposal? Stevie can get them assigned and take this one forward

[DylanDylann]

@luacmartins @cead22 Could you please check my comment ?

[cead22]

Both work from my perspective, so I'd lean on what you @DylanDylann and @luacmartins think is best

[melvin-bot]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[DylanDylann]

@slafortune This is ready for payment. The PR is deployed to production on 1/10

[slafortune]

@DylanDylann role - contributor - Paid $250 via upworks
@nkdengineer Role - C+ - Paid $250 via upworks