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 [email protected] 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.

[jasperhuangg]

@sobitneupane thanks for the timely proposal! I think @grgia already had some changes locally so she went ahead and made a PR.

[mallenexpensify]

Oooooh, this might be one of those rare (first time I've seen it) situations where a proposal was submitted before the External label was added and we decided to fix internally. @grgia:

1. Is that correct?
2. For the fix, did you use/reference code that @sobitneupane proposed?

Per our CONTRIBUTING.md
> Note: Issues that have not had the External label applied have not yet been approved for implementation. This means, if you propose a solution to an issue without the External label (which you are allowed to do) it is possible that the issue will be fixed internally. If the External label has not yet been applied, Expensify has the right to use your proposal to fix said issue, without providing compensation for your solution. This process covers the very rare instance where we need or want to fix an issue internally.

[grgia]

Ah yes, I'm sorry. There was no label so I assumed I could fix it, now I know for next time.

[mallenexpensify]

@grgia For the fix, did you use/reference code that @sobitneupane proposed?
I/we need to decide if they're due compensation

[mallenexpensify]

Chatted with @grgia, she's new to the team and was unaware of our process. Technically, per our CONTRIBUTING.md, since the proposal was submitted before the Help Wanted label was added, we could use details from the proposal without compensating @sobitneupane . @grgia mentioned she did reference the code provided so, for this edge case, we will compensate @sobitneupane . @sobitneupane please monitor the issue and PR until the PR is deployed to production, provide help if/where needed. Compensation will be issues 7 days after the PR has been deployed to production, assuming there are no regressions.

@sobitneupane , please apply here https://www.upwork.com/jobs/~0106db93cef35496f5 and confirm in this issue once you have.

[sobitneupane]

Applied.

[mallenexpensify]

@sobitneupane , hired, please let me know when you accept and I'll pay

[sobitneupane]

@mallenexpensify I am getting error while trying to accept your offer.

[mallenexpensify]

hmmmm @sobitneupane , maybe try again? This is what I'm seeing

[sobitneupane]

No luck. Unable to accept offer for this job. I was able to accept offer for other jobs though.

[mallenexpensify]

How about this one @sobitneupane https://www.upwork.com/jobs/~014ab10dacdb6c00ad

[sobitneupane]

Accepted Offer. Thanks @mallenexpensify.

[mallenexpensify]

You're welcome @sobitneupane . You're paid and both Upwork jobs are closed.