[HOLD for payment 2024-11-29] [$250] Auto suggestions for emoji is not sorted alphabetically

[m-natarajan]

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

---

Version Number: 9.0.43-1
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
Expensify/Expensify Issue URL:
Issue reported by: @flodnv
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1727863255553599

Action Performed:

1. Go to staging.new.expensify.com
2. Open any DM
3. Type :disap in the compose box for emoji suggestions

Expected Result:

Suggestions displayed are sorted alphabetically

Actual Result:

Suggestions displayed are not sorted alphabetically

Workaround:

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

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021841781443095645269
• Upwork Job ID: 1841781443095645269
• Last Price Increase: 2024-10-03
• Automatic offers:
• suneox | Reviewer | 104528548
• nkdengineer | Contributor | 104528551

Issue Owner

Current Issue Owner: @adelekennedy

[melvin-bot]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[cretadn22]

Proposal

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

Auto suggestions for emoji is not sorted alphabetically

What is the root cause of that problem?

We don't arrange the emoji list before showing it

App/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx

Line 169 in 1764d10

const newSuggestedEmojis = EmojiUtils.suggestEmojis(leftString, preferredLocale);

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

We should sort the emoji list alphabetically by name before displaying it

const newSuggestedEmojis = lodashSortBy(EmojiUtils.suggestEmojis(leftString, preferredLocale), (emoji) => emoji.name) 

What alternative solutions did you explore? (Optional)

Alternatively, we can prioritize emojis that match the search term first and then sort the remaining ones alphabetically

[nkdengineer]

Proposal

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

Suggestions displayed are not sorted alphabetically

What is the root cause of that problem?

App/src/libs/EmojiUtils.ts

Line 423 in 1764d10

const nodes = trie.getAllMatchingWords(emojiData[0].toLowerCase().slice(1), limit);

Here we are calculating nodes based on the text entered by the user and the keywords defined in this file

The reason when we enter :dis the 2 icons "melting_face" and "dotted_line_face" are displayed first is because they have the keyword "disappear" here and here

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

Since the suggestEmojis function is used in many other places, we should return the match sorted by the emoji name in this function suggestEmojis

App/src/libs/EmojiUtils.ts

Line 408 in 1764d10

function suggestEmojis(text: string, lang: Locale, limit: number = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS): Emoji[] | undefined {

    return lodashSortBy(matching, (emoji) => !emoji.name.includes(emojiData[0].toLowerCase().slice(1)));

What alternative solutions did you explore? (Optional)

Screen.Recording.2024-10-03.at.02.42.20.mov

[melvin-bot]

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

[melvin-bot]

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

[suneox]

Thanks for all the proposals.

Based on the expected result, Suggestions displayed are sorted alphabetically the outcome appears like this

However, I believe this is not a common pattern. Another platforms with markdown editors like Slack and GitHub prioritize emoji suggestions that match the text more closely, giving them higher priority.

Screen.Recording.2024-10-03.at.22.22.54.mov

So @flodnv, I would like to confirm whether the expected behavior should continue sorting by alphabetically or prioritize those that more closely match the text.

cc: @adelekennedy

[suneox]

@nkdengineer Your RCA is correct and detailed, but could you please double-check your implementation? When searching with only 2 characters, the result is incorrect

Screen.Recording.2024-10-03.at.22.44.58.mp4