[Awaiting checklist completion] [$500] Chat - User suggestion lost when hit space after entering user's first name

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

---

Version Number: 1.3.89-6

Reproducible in staging?: Yes

Reproducible in production?: Yes

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: Applause - Internal Team

Slack conversation:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Go to #announce room with several members
3. Enter "@" in the compose box
4. Start typing Fist and Last name of the user using space

Expected Result:

Suggestion list should remain when user use space to divide First and Last name

Actual Result:

User suggestion lost when hit space after entering user's first name into chat composers

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

Windows: Chrome

Bug6248030_1698095877043.Recording__1293.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d7e3cf200819dc8c
• Upwork Job ID: 1716576553756684288
• Last Price Increase: 2023-10-23
• Automatic offers:
• graylewis | Contributor | 27484138

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

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

[melvin-bot]

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

[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 - @allroundexperts (External)

[graylewis]

Proposal

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

When a user's display name contains a space, the suggestions cause by mentioning a user with an @ sign stop working after the space

What is the root cause of that problem?

Parsing the @ is done by splitting words by the ONST.REGEX.SPACE_OR_EMOJI regex. The last item in the array of words generated from the .split() call is the only part of your text considered when generating suggestions.

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

In the case of parsing mentions (i.e. the original logic is OK for the emoji parsing but not mention parsing), instead of only checking the last word, we should check the last x words, where x is a reasonable amount of spaces in a name we should support searching.

Like so (edit of lines 201 on from src/pages/home/report/ReportActionCompose/SuggestionMention.js):

            const leftString = value.substring(0, suggestionEndIndex);
            const words = leftString.split(CONST.REGEX.SPACE_OR_EMOJI);
            const lastWord = _.last(words);
            const secondToLastWord = words[words.length - 3];

            let atSignIndex;
            let atSignWord;
        
            if (lastWord.startsWith('@')) {
                atSignIndex = leftString.lastIndexOf(lastWord);
                atSignWord = lastWord;
            } else if (secondToLastWord && secondToLastWord.startsWith('@')) {
                atSignIndex = leftString.lastIndexOf(secondToLastWord);
                atSignWord = secondToLastWord;
            }

            const prefix = atSignWord.substring(1);

            const nextState = {
                suggestedMentions: [],
                atSignIndex,
                mentionPrefix: prefix,
            };

            const isCursorBeforeTheMention = valueAfterTheCursor.startsWith(atSignWord);

            if (!isCursorBeforeTheMention && isMentionCode(atSignWord)) {
                const suggestions = getMentionOptions(personalDetails, prefix);
                nextState.suggestedMentions = suggestions;
                nextState.shouldShowSuggestionMenu = !_.isEmpty(suggestions);
            }

Alternative Solutions:

Change composer parsing altogether such that it uses more complex signals to determine what is the currently active segment of text (i.e. timing or something else) rather than by relying on spaces.

[tienifr]

Proposal

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

Chat - User suggestion lost when hit space after entering user's first name

What is the root cause of that problem?

We're extracting the lastWord (split by space) to figure out it's the mention or not

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

Line 206 in cc3c51c

const lastWord = _.last(words);

In this case, the text is @name1 name2, so lastWord is name2 and does not start with @ sign

-> The mention suggestion is not shown

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

We should not split the text by space to detect the mention, instead of that, we should use @

1. Remove \s in MENTION_BREAKER
2. Update logic to detect mention:

            const leftString = value.substring(0, suggestionEndIndex);
            const lastIndexOfMentionSignal = leftString.lastIndexOf('@') // find the last `@`
            const lastMention = lastIndexOfMentionSignal>=0 ? leftString.substring(lastIndexOfMentionSignal) : '' // last mention
            const numberOfSpace = lastMention.split(" ").length - 1 // number of space after `@`
            let atSignIndex;
            if (lastMention) {
                atSignIndex = lastIndexOfMentionSignal
            }

            const prefix = lastMention.substring(1);

            const nextState = {
                suggestedMentions: [],
                atSignIndex,
                mentionPrefix: prefix,
            };

            const isCursorBeforeTheMention = valueAfterTheCursor.startsWith(lastMention);

            if (!isCursorBeforeTheMention && lastMention && numberOfSpace<=5) {

In the code change above, I use the additional condition numberOfSpace to count the spaces after @ signal, if it's over than 5, we don't allow to show mention (like what Slack did), so we don't need to call getMentionOptions in this case

Result

Screen.Recording.2023-10-24.at.19.05.39.mov

[twisterdotcom]

Two proposals please @allroundexperts.