Feature Request: Insert a space after an emoji is selected

[mvtglobally]

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

---

Problem:

When sending messages and including an emoji, after you've selected the emoji and continue to type your message, a space isn't added so it looks like :woo-homer:this.

Solution:

By default, add a space after :ralph: so that the user can continue to type without having to add another space
Context/Examples/Screenshots/Notes: The space after :milhouse: is default in Slack so many people are used to it being added. We're also working on allowing the ability to type emoji names (GH), ala :granpa: and the space after :granpa: is also default in Slack and what people are used to.

Action Performed:

1. Navigate to any chat
2. send emoji

Expected Result:

User should see space after an emoji is selected

Actual Result:

When sending messages and including an emoji, after you've selected the emoji and continue to type your message, a space isn't added so it looks like :woo-homer:this.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.1-0
Reproducible in staging?:
Reproducible in production?:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by: @mallenexpensify
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1662746279291419

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @sonialiap (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[sobitneupane]

Proposal:
We can insert space after an emoji in addEmojiToTextBox(emoji) function.

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

Lines 312 to 325 in 3335b18

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

    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);
        const newComment = this.comment.slice(0, this.state.selection.start)
-            + emoji + this.comment.slice(this.state.selection.end, this.comment.length);
        this.textInput.setNativeProps({
            text: newComment,
        });
        this.setState(prevState => ({
            selection: {
-                start: prevState.selection.start + emoji.length,
-                end: prevState.selection.start + emoji.length,
+                start: prevState.selection.start + emojiWithSpace.length,
+                end: prevState.selection.start + emojiWithSpace.length,
            },
        }));
        this.updateComment(newComment);
    }

[sonialiap]

The suggestion sounds good to me 👍

[melvin-bot]

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