[$500] Chat - When pressing the left/right arrow keys after typing '@', the text selection does not move

[lanitochka17]

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

---

Issue found when validating #38383
Version Number: 1.4.57-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): abebemiherat@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1, Open any chat
2, Type a mention to open up the mention suggestion
3, Press the left/right arrow key
4, Observe that the text selection does not move to the left/right

Expected Result:

when right left arrows are pressed, suggestions highlights should reflect the change corresponding to cursor movement in the compose box as it does with emojis

Actual Result:

when right left arrows are pressed, suggestions highlights are not changing corresponding to cursor movement in the compose box. But it does with emojis.

NOTE: Emoji behavior also shown in the video

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

Add any screenshot/video evidence

Screen.Recording.2024-03-27.at.11.47.04.PM.mp4

Recording.1496.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013f02f19e8b3faf16
• Upwork Job ID: 1775203737590730752
• Last Price Increase: 2024-04-02
• Automatic offers:
• eh2077 | Reviewer | 0
• bernhardoj | Contributor | 0

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @stitesExpensify (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

Production:

Recording.1497.mp4

[lanitochka17]

@stitesExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[shubham1206agra]

@lanitochka17 You might be confused here. The staging behaviour is correct indeed.

[eh2077]

@lanitochka17 You might be confused here. The staging behaviour is correct indeed.

Hi @stitesExpensify , I saw your #38383 (comment) here but I think I agree with @shubham1206agra that this should be the expected behaviour. I tried to search old issues to find a regression test to support my point but couldn't find such one.

@lanitochka17 Are you able to search our existing regression tests to see if we have any tests related to this case?

[bernhardoj]

I think QA expects the mention highlight to move along with the text selection (as stated by @stitesExpensify in #38383 (comment)) just like emoji, but because on prod we can't move the selection at all, QA put a deploy blocker.

The highlight of the mention/emoji is based on the prefix props,

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

Line 323 in 5a8cb7f

prefix={suggestionValues.mentionPrefix}

the prefix props for mention coming from suggestionValues.mentionPrefix which contains the text after @, however, to correctly update the highlight of the suggestion, the prefix should consider the selection position, just like we did with emoji suggestion.

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

Line 230 in 5a8cb7f

prefix={value.slice(suggestionValues.colonIndex + 1, selection.start)}

For mention suggestion, the prefix tries to contain the whole string. (notice the leftString)

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

Lines 225 to 234 in 5a8cb7f

	let suggestionEndIndex;
	if (indexOfFirstSpecialCharOrEmojiAfterTheCursor === -1) {
	// We didn't find a special char/whitespace/emoji after the cursor, so we will use the entire string
	suggestionEndIndex = value.length;
	} else {
	suggestionEndIndex = indexOfFirstSpecialCharOrEmojiAfterTheCursor + selectionEnd;
	}
	const afterLastBreakLineIndex = value.lastIndexOf('\n', selectionEnd - 1) + 1;
	const leftString = value.substring(afterLastBreakLineIndex, suggestionEndIndex);

We can update it to always use selectionEnd (or selectionStart, there is currently inconsistencies on the selection usage, even on emoji suggestion)

const leftString = value.substring(afterLastBreakLineIndex, selectionEnd);

But this will cause this issue again where the suggestion won't show if we type @@ and put the selection between the @, @|@.

And that's because we check whether the cursor is before a mention code (@)

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

Lines 264 to 266 in 5a8cb7f

	const isCursorBeforeTheMention = valueAfterTheCursor.startsWith(suggestionWord);
	if (!isCursorBeforeTheMention && isMentionCode(suggestionWord)) {

We should remove it as we already update the leftString to slice it only until selectionEnd.

If we want to fix it, I can create a proposal.