[$250] Chat - Space Not Added After Emoji Selection in Composer

[izarutskaya]

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: v1.4.61-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): abebemiherat@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1, Navigate to any chat.
2, Add emojis in the composer.

Expected Result:

Upon selecting emojis, notice that a space is not added after the emojis.

Actual Result:

After selecting emojis in the composer, a space should be added after each emoji.

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

Bug6442195_1712579372354.emoji.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018b8b77d54dddade1
• Upwork Job ID: 1777400833001480193
• Last Price Increase: 2024-04-08

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 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.

[izarutskaya]

@garrettmknight I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[tomekzaw]

This might be related to Live Markdown Preview.

[izarutskaya]

We think this issue might be related to the #vip-vsb.

[Julesssss]

This might be related to Live Markdown Preview.

Yeah, or maybe also the emoji picker/keyboard issue. if so I'd much rather raise those as non-blocking issues and not revert these major PRs

[garrettmknight]

I don't think this is a deploy blocker.

[melvin-bot]

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

[melvin-bot]

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

[ikevin127]

Note

I remember the exact same issue was opened 7 months ago: Chat - Space is not added after an emoji is selected

But in this case:

This might be related to Live Markdown Preview.

I think @tomekzaw might be right since there were no other major changes to the Composer recently, therefore that would be the first place I'd look at for the root cause.

Anyway the issue mentioned from 7 months ago can definitely help give more context and check some other possible root causes off the list.

[tomekzaw]

It seems like this bug has been fixed in the meantime as I cannot reproduce it on current prod (Firefox and Chrome):

Screen.Recording.2024-04-08.at.23.13.57.mov

There was an issue with text cursor placed incorrectly (one character earlier than it should be) when typing – perhaps this bug was another symptom?

Please confirm that this bug is no longer present and close this issue if confirmed, thanks!

[ikevin127]

From the OP video it looks like it wasn't just the cursor position, since there's clearly no spaces between the 3 emojis:

Just pulled latest main and I confirm that the issue is still present (consistently):

MacOS: Chrome / Safari

web.mov

iOS: mWeb Safari

ios-mweb.MP4

I looked at what's actually happening frame-by-frame and I noticed that on the first selected emoji there's actually an empty space and also a newline but shortly after selection we can notice how the Live Markdown Preview (most likely, not sure though) is formatting and removing the space and newline, leaving us with the emoji without a space (cursor right after it):

MacOS: Chrome / Safari (frame-by-frame)

frame-by-frame.mov

And weirdly, it looks like the space of the first emoji is maintained on iOS: mWeb Safari (see video above) as long as the user adds emojis without focusing the Composer, but not for the subsequent emojis. The space is not maintained for the first emoji if the Composer is focused (cursor visible) when adding the subsequent emojis.

cc @tomekzaw Any thoughts ?

[tomekzaw]

Indeed, the bug is reproducible on current main (8af9eae) but not on production 🤔

[Skalakid]

I think this issue has been already fixed in #39934. I can't reproduce it on the lates main now.

emojis.with.space.after.mov

Screen.Recording.2024-04-10.at.09.31.42.mov

[garrettmknight]

Fixed on staging and prod, closing.