[HOLD for payment 2024-02-07] [$2000] Chat - Whitespace is not added after an emoji while inserting via native keyboard

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open a chat
2. Insert a couple of emojis via emoji picker available in composer and send the message.
3. Now add a bunch of emojis via the emoji picker in native keyboard and send the message

Expected Result:

As per the issue #11100 and slack discussion https://expensify.slack.com/archives/C01GTK53T8Q/p1662746279291419 a white space is expected after each emoji.

Actual Result:

Whitespace is added only if emoji is added via emoji picker in composer and not while added using native keyboard.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.44-2
Reproducible in staging?: y
Reproducible in production?: y
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
Notes/Photos/Videos: Any additional supporting documentation

emoji.webm

RPReplay_Final1690382962.1.MP4

Expensify/Expensify Issue URL:
Issue reported by: @aswin-s
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690359926207719

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0188d7c4a5e13254b6
• Upwork Job ID: 1684628795620294656
• Last Price Increase: 2023-10-20
• Automatic offers:
• aswin-s | Contributor | 27373872
• aswin-s | Reporter | 27373874

[melvin-bot]

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

[samh-nl]

Proposal

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

Whitespace is not added after an emoji while inserting via native keyboard

What is the root cause of that problem?

No logic has been implemented for automatically adding whitespace after inserting an emoji via the native keyboard.

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

In ReportActionCompose, we perform these changes:

1. Change to an onChange handler:

- onChangeText={(comment) => this.updateComment(comment, true)}
+ onChange={this.updateCommentAndProcessEmoji}

2. The new function would be a wrapper around this.updateComment. It detects if the event is an emoji insertion and appends a trailing space (default behavior of this.replaceSelectionWithText). Subsequently, it passes on the processed comment.

updateCommentAndProcessEmoji(event) {
	if (event.nativeEvent.data && event.nativeEvent.isComposing && EmojiUtils.containsOnlyEmojis(event.nativeEvent.data)) {
                this.replaceSelectionWithText(event.nativeEvent.data);
	} else {
	        this.updateComment(event.nativeEvent.text, true);
        }
}

3. We add a shouldDebounceSaveComment (default false) argument to this.replaceSelectionWithText to pass to this.updateComment.

This change would also be applied to ReportActionItemMessageEdit.

What alternative solutions did you explore? (Optional)

N/A

[daordonez11]

Proposal

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

Experience of inserting emoji in chat is not unified!

What is the root cause of that problem?

So I will open a new discussion in slack. @mallenexpensify proposed the space but this is only true when emoji is written with :emoji, when the emoji is picked from the picker menu in slack it is written without trail space. We would have to write custom code to "process" the written emoji and set a space in the onChange of the composer to unify but my proposal is to set the experience same as slack!

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

I would remove the trail from onEmojiSelected in ReportActionCompose and ReportActionItemMessageEdit since the implementation of :emoji already includes the space to unify the experience with slack and leave the EmojiPickerMenu to behave as the native one. Same as slack.

Video of solution working same as slack with native menu and EmojiPickerMenu:

working.as.slack.mp4

What alternative solutions did you explore? (Optional)

Update the onChange handler of Composer component, use a regex to validate if there is an emoji and include the space after it is included via native picker. Still I think altering native behavior wouldn't be expected but if it is desired we can implement the custom code!

[melvin-bot]

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

[melvin-bot]

Current assignee @CortneyOfstad is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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