[HOLD for payment 2023-01-11] Web/Desktop - Emoji Picker - Space is added after the emoji in compose box

[isagoico]

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. On Web/Desktop - Navigate to a conversation
2. Click on the emoji selector and click on any emoji

Expected Result:

The emoji should be added in the compose box without any space after the emoji

Actual Result:

Emoji is added with a space in the compose box. On desktop/web, no space should be added after adding a emoji in compose box.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: v1.2.36-2

Reproducible in staging?: Yes
Reproducible in production?: Yes

Email or phone of affected tester (no customers): N/A

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL: N/A

Issue reported by: Applause
Slack conversation: N/A

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Triggered auto assignment to @youssef-lr (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[isagoico]

Creating this issue coming from this comment - https://github.com/Expensify/Expensify/issues/245551#issuecomment-1337440659

[s77rt]

Not a bug, this is actually intended.

App/src/libs/EmojiUtils.js

Lines 202 to 206 in 2e69dac

	// If this is the last emoji in the message and it's the end of the message so far,
	// add a space after it so the user can keep typing easily.
	if (i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
	emojiReplacement += ' ';
	}

[dylanexpensify]

@s77rt in the note above (which maybe can't be accessed given it's in a diff repo!) we are wanting to have the behavior add a space for emojis ending with a : in mobile, but not web/desktop.

[Puneet-here]

Proposal

If we don't want the space when choosing emoji from the picker we just have to make these changes -

At message composer

App/src/pages/home/report/ReportActionCompose.js

Line 325 in d7bc650

addEmojiToTextBox(emoji) {

     addEmojiToTextBox(emoji) {
-        const emojiWithSpace = `${emoji} `;
         const newComment = this.comment.slice(0, this.state.selection.start)
-            + emojiWithSpace + this.comment.slice(this.state.selection.end, this.comment.length);
+            + emoji + this.comment.slice(this.state.selection.end, this.comment.length);
+        this.textInput.setNativeProps({
+            text: newComment,
+        });
         this.setState(prevState => ({
             selection: {
-                start: prevState.selection.start + emojiWithSpace.length,
-                end: prevState.selection.start + emojiWithSpace.length,
+                start: prevState.selection.start + emoji.length,
+                end: prevState.selection.start + emoji.length,
             },

At edit composer

App/src/pages/home/report/ReportActionItemMessageEdit.js

Line 179 in d7bc650

addEmojiToTextBox(emoji) {

     addEmojiToTextBox(emoji) {
-        const emojiWithSpace = `${emoji} `;
         const newComment = this.state.draft.slice(0, this.state.selection.start)
-            + emojiWithSpace + this.state.draft.slice(this.state.selection.end, this.state.draft.length);
+            + emoji + this.state.draft.slice(this.state.selection.end, this.state.draft.length);
         this.setState(prevState => ({
             selection: {
-                start: prevState.selection.start + emojiWithSpace.length,
-                end: prevState.selection.start + emojiWithSpace.length,
+                start: prevState.selection.start + emoji.length,
+                end: prevState.selection.start + emoji.length,
             },

[allroundexperts]

Proposal

In order to add space just on mobile, we can make the following changes:

diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index 617c624b2..bd2a76868 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -186,9 +186,10 @@ function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) {
 /**
  * Replace any emoji name in a text with the emoji icon
  * @param {String} text
+ * @param {Boolean} addSpace
  * @returns {String}
  */
-function replaceEmojis(text) {
+function replaceEmojis(text, addSpace = true) {
     let newText = text;
     const emojiData = text.match(CONST.REGEX.EMOJI_NAME);
     if (!emojiData || emojiData.length === 0) {
@@ -201,7 +202,7 @@ function replaceEmojis(text) {
 
             // If this is the last emoji in the message and it's the end of the message so far,
             // add a space after it so the user can keep typing easily.
-            if (i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
+            if (addSpace && i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
                 emojiReplacement += ' ';
             }
             newText = newText.replace(emojiData[i], emojiReplacement);
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 37e5602ca..d49b2464f 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -378,7 +378,7 @@ class ReportActionCompose extends React.Component {
      * @param {Boolean} shouldDebounceSaveComment
      */
     updateComment(comment, shouldDebounceSaveComment) {
-        const newComment = EmojiUtils.replaceEmojis(comment);
+        const newComment = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth);
         this.setState((prevState) => {
             const newState = {
                 isCommentEmpty: !!newComment.match(/^(\s|`)*$/),
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 2f7fbc29d..5f772d84d 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -101,7 +101,7 @@ class ReportActionItemMessageEdit extends React.Component {
      * @param {String} draft
      */
     updateDraft(draft) {
-        const newDraft = EmojiUtils.replaceEmojis(draft);
+        const newDraft = EmojiUtils.replaceEmojis(draft, this.props.isSmallScreenWidth);
         this.setState((prevState) => {
             const newState = {draft: newDraft};
             if (draft !== newDraft) {

[s77rt]

@dylanexpensify Why on mobile only?
Something does not make sense, IMO we should remove the extra space on all platform by removing those lines

App/src/libs/EmojiUtils.js

Lines 202 to 206 in 2e69dac

	// If this is the last emoji in the message and it's the end of the message so far,
	// add a space after it so the user can keep typing easily.
	if (i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
	emojiReplacement += ' ';
	}

[s77rt]

Proposal

diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index 617c624b2c..2e96216176 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -198,12 +198,6 @@ function replaceEmojis(text) {
         const checkEmoji = emojisTrie.search(emojiData[i].slice(1, -1));
         if (checkEmoji && checkEmoji.metaData.code) {
             let emojiReplacement = checkEmoji.metaData.code;
-
-            // If this is the last emoji in the message and it's the end of the message so far,
-            // add a space after it so the user can keep typing easily.
-            if (i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
-                emojiReplacement += ' ';
-            }
             newText = newText.replace(emojiData[i], emojiReplacement);
         }
     }
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 9eb52bbe28..751dab6445 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -323,13 +323,12 @@ class ReportActionCompose extends React.Component {
      * @param {String} emoji
      */
     addEmojiToTextBox(emoji) {
-        const emojiWithSpace = `${emoji} `;
         const newComment = this.comment.slice(0, this.state.selection.start)
-            + emojiWithSpace + this.comment.slice(this.state.selection.end, this.comment.length);
+            + emoji + this.comment.slice(this.state.selection.end, this.comment.length);
         this.setState(prevState => ({
             selection: {
-                start: prevState.selection.start + emojiWithSpace.length,
-                end: prevState.selection.start + emojiWithSpace.length,
+                start: prevState.selection.start + emoji.length,
+                end: prevState.selection.start + emoji.length,
             },
         }));
         this.updateComment(newComment);
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 2f7fbc29db..960d4a4c9b 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -177,13 +177,12 @@ class ReportActionItemMessageEdit extends React.Component {
      * @param {String} emoji
      */
     addEmojiToTextBox(emoji) {
-        const emojiWithSpace = `${emoji} `;
         const newComment = this.state.draft.slice(0, this.state.selection.start)
-            + emojiWithSpace + this.state.draft.slice(this.state.selection.end, this.state.draft.length);
+            + emoji + this.state.draft.slice(this.state.selection.end, this.state.draft.length);
         this.setState(prevState => ({
             selection: {
-                start: prevState.selection.start + emojiWithSpace.length,
-                end: prevState.selection.start + emojiWithSpace.length,
+                start: prevState.selection.start + emoji.length,
+                end: prevState.selection.start + emoji.length,
             },
         }));
         this.updateDraft(newComment);

Details

I removed the extra space since it's unwanted and because as a user I would not except to get any extra spaces. Using my keyboard emoji picker does not add spaces, why would the app's emoji picker add spaces?
IMO It's better to remove the extra spaces to keep a consists behaviour and meet user expectations

[dylanexpensify]

to clarify, adding the space for mobile, but not desktop/web is an internal design decision we made @s77rt