[$250] mWeb - Chat - Entering multi line text by tapping enter key, cursor goes down instead of next line

[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.0.29
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4919668
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open a chat
3. Copy the url and paste in compose
4. Send the message
5. Edit the message by long pressing the message
6. Remove url text and try to enter multi line text by tapping enter key

Expected Result:

Entering multi line text by tapping enter key, cursor must go to next line

Actual Result:

Entering multi line text by tapping enter key, cursor goes down instead of next line

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

Add any screenshot/video evidence

Bug6592442_1725419174701.Screenrecorder-2024-09-04-08-27-54-262_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021831319729138132205
• Upwork Job ID: 1831319729138132205
• Last Price Increase: 2024-09-25

[melvin-bot]

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

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

[lanitochka17]

Production:

Screen_Recording_20240904_071959_Chrome.mp4

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Gonals]

I don't think we need to block deploy on this one

[kaushiktd]

@Gonals @lanitochka17 when I long-press the message, the option to "Copy URL to clipboard" appears instead of the "Edit" option. How can I resolve this issue and enable message editing?
here is the video

screen-capture.webm

[alexpensify]

@Gonals can we get your feedback here? Thanks!

[Gonals]

@Gonals @lanitochka17 when I long-press the message, the option to "Copy URL to clipboard" appears instead of the "Edit" option. How can I resolve this issue and enable message editing? here is the video

screen-capture.webm

Don't press directly on top of the URL. Just the general message.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[QichenZhu]

The composer is focused before the context menu disappears, causing issues with the focus trap and React event system. PR #48973 will fix this by adding a delay.

Just sharing my findings, hoping they help address the root cause in the upstream library. Here’s what happens:

1. After the Edit comment option is clicked, the composer is auto-focused, but the context menu is still animating out. Its focus trap is still active, and stops the focusin event's propagation (which is bad). The composer is still focused anyway because the focusin event can't be canceled.

2. React doesn’t receive the focusin event and fails to update the activeElement. This prevents React from getting the current selection of activeElement.

https://github.com/facebook/react/blob/f1338f8080abd1386454a10bbf93d67bfe37ce85/packages/react-dom/src/events/plugins/SelectEventPlugin.js#L162

https://github.com/facebook/react/blob/f1338f8080abd1386454a10bbf93d67bfe37ce85/packages/react-dom/src/events/plugins/SelectEventPlugin.js#L108

 

3. When Enter is pressed, the composer does not know the caret position and inserts the new line at the end of the text.

[alexpensify]

@Ollyws when you get a chance, can you review these proposals? Thanks!

[Ollyws]

No proposals to review but thanks for the info @QichenZhu

[Ollyws]

Awaiting proposals...

[alexpensify]

Open for proposals here

[kaushiktd]

@Ollyws when long press on any text message, It shows all the option to edit the message, but when trying to edit URL message or link. It doesn't show edit comment option. It shows only Copy URL. You can find attached image.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@alexpensify @Ollyws @Gonals this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[alexpensify]

Waiting for proposals here

[alexpensify]

Still open here

[alexpensify]

It is not overdue; we are open to proposals here.

[QichenZhu]

The composer is focused before the context menu disappears, causing issues with the focus trap and React event system. PR #48973 will fix this by adding a delay.

The PR has been merged, and this issue is no longer reproducible.

Record_2024-09-24-15-36-23-2024-09-24.03_41_32.337.mp4

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[alexpensify]

Closing - it looks like this one was fixed in another GH. Thanks for the update.