[HOLD for payment 2022-02-01] If you select an emoji using enter the emoji skin tone always yellow - reported by @thesahindia

[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!

---

Action Performed:

1. Open app
2. Navigate to any chat
3. Select emoji picker and change default skin color to smth
4. select any skin emoji and hit enter on keyboard

Expected Result:

Skin tone should be persisting

Actual Result:

Skin tone sent as default

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: 1.1.29-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2022-01-08.at.2.16.19.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @thesahindia
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1641633933199800

View all open jobs on GitHub

[MelvinBot]

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

[thesahindia]

Proposal

we are not checking if the types and the preferred skin tone is being provided when the user hits the enter/return key so we just need to add this logic -

Here we are checking if the highlighted item has types and the preferred skin tone type, if it's true we use preferred skin tone type from types array else we use item.code

if (keyBoardEvent.key === 'Enter' && this.state.highlightedIndex !== -1) {
                const item = this.state.filteredEmojis[this.state.highlightedIndex];
                const emoji = item.types && item.types[this.props.preferredSkinTone]
                    ? item.types[this.props.preferredSkinTone]
                    : item.code;
                this.props.onEmojiSelected(emoji, item);
                return;
            }

we need to add the above logic here -

App/src/pages/home/report/EmojiPickerMenu/index.js

Lines 143 to 147 in 1a64fa7

	// Select the currently highlighted emoji if enter is pressed
	if (keyBoardEvent.key === 'Enter' && this.state.highlightedIndex !== -1) {
	this.props.onEmojiSelected(this.state.filteredEmojis[this.state.highlightedIndex].code, this.state.filteredEmojis[this.state.highlightedIndex]);
	return;
	}

[MelvinBot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MitchExpensify]

Upwork Job

[MelvinBot]

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