[WAITING ON CHECKLIST] [$500] Web - Emoji suggestions is not displayed between "~~" & "__"

[kbecciv]

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 any report
2. Type ** then :jo in between **
3. Observe emoji suggestions is displayed
4. Type __ or ~~ then :jo in between __ or ~~
5. Observe emoji suggestions is not displayed

Expected Result:

Emoji suggestions should be displayed.

Actual Result:

Emoji suggestions is not displayed.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.70.5
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
Notes/Photos/Videos: Any additional supporting documentation

Monosnap.screencast.2023-09-16.07-26-31.mp4

Recording.4535.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Krishna2323
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694829781444709

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0167ad7e94902ca806
• Upwork Job ID: 1703139355938205696
• Last Price Increase: 2023-09-16

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

Proposal by: @Krishna2323
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694829781444709

Proposal

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

Emoji suggestions is not displayed between "~~" & "__"

What is the root cause of that problem?

The function isEmojiCode splits the string based on the regex SPECIAL_CHAR_OR_EMOJI. This regex is designed to split the string on various special characters and emojis, but it didn't include the characters _ and ~.

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

Line 176 in 76c1559

const isCurrentlyShowingEmojiSuggestion = isEmojiCode(value, selectionEnd);

App/src/CONST.ts

Lines 1223 to 1225 in 76c1559

	SPECIAL_CHAR_OR_EMOJI:
	// eslint-disable-next-line no-misleading-character-class
	/[\n\s,/?"{}[\]()&^%\\;`$=#<>!*\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,

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

By modifying the SPECIAL_CHAR_OR_EMOJI regex to include ~ and _, the function correctly splits the string, and the check for the emoji code works as expected.

Updated Regex:
/[\n\s,/?"{}[]()&^%\;`_~$=#<>!*\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu

We can add "~_" anywhere in between []

Result: