[HOLD for payment 2023-11-22] [$500] Chat - App does not replace # on selection of mention

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

---

Version Number: 1.3.79.3
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: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696496817615989

Action Performed:

Precondition: User should know a user with # in display name

1. Open the app
2. Open any report
3. Write '@#' and select the user in result
4. Observe that app does not replace # with result

Expected Result:

On selecting user from mention result, app should replace search term with result

Actual Result:

On selecting user from mention result, app does not replace search term with result if term is '#'

Workaround:

Unknown

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

Android: Native

android.native.mention.displaces.on.selection.mov

Android: mWeb Chrome

android.chrome.app.displaces.in.mention.mp4

iOS: Native

ios.safari.native.app.displaces.in.mention.mov

iOS: mWeb Safari

ios.safari.native.app.displaces.in.mention.mov

MacOS: Chrome / Safari

mac.chrome.desktop.app.displaces.in.mention.mov

MacOS: Desktop

mac.chrome.desktop.app.displaces.in.mention.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0159ee5a631ff4f0b0
• Upwork Job ID: 1711736982382366720
• Last Price Increase: 2023-11-01
• Automatic offers:
• fedirjh | Reviewer | 27547155
• abzokhattab | Contributor | 27547156
• dhanashree-sawant | Reporter | 27547157

[melvin-bot]

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

[abzokhattab]

Proposal

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

The # is not replaced on the selection of the mention

What is the root cause of that problem?

we use the MENTION_REPLACER to get the comment after the mention, apparently, this regex terminates the matching upon encountering special characters, including "#," ,, this is declared in the SPECIAL_CHAR variable and used in MENTION_REPLACER, resulting in incomplete matches.

App/src/CONST.ts

Line 1297 in 830feaf

SPECIAL_CHAR: /[,/?"{}[\]()&^%;`$=#<>!*]/g,

App/src/CONST.ts

Lines 1314 to 1316 in 830feaf

	get MENTION_REPLACER() {
	return new RegExp(`^@[^\\n\\r]*?(?=$|\\s|${this.SPECIAL_CHAR.source}|${this.EMOJI.source})`, 'u');
	},

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

there is no need to use the MENTION_REPLACER in deciding the comment after the mention .. instead we can use the index of the last char of suggestionValues.mentionPrefix and fetch the string after it

i think it is easier to illustrate it by providing the code changes, so we should change this:

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

Line 84 in 49bc03b

const commentAfterAtSignWithMentionRemoved = value.slice(suggestionValues.atSignIndex).replace(CONST.REGEX.MENTION_REPLACER, '');

To:

const commentAfterAtSignWithMentionRemoved = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1);

and of course, remove the MENTION_REPLACER from the const.ts file

POC:

Screen.Recording.2023-10-28.at.12.30.15.AM.mov

[melvin-bot]

Triggered auto assignment to @conorpendergrast (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 Contributor-plus team member for initial proposal review - @fedirjh (External)

[fedirjh]

Let's retest after #29239 is merged, as the regex structure will be changed in that PR.