[HOLD for payment 2023-11-01] [HOLD for payment 2023-10-13] [$500] Chat - App displays mention suggestion for sometime when we remove space from before @

[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 the app
2. Open any report
3. Type @, it will trigger mention suggestions
4. Add space before @
5. Remove the space and observe that suggestions are displayed for sometime and then dismissed

Expected Result:

App should not display suggestions on removing space before @

Actual Result:

App displays suggestions on removing space before @ for sometime

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.74.0
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

suggestion.before.@.on.space.remove.windows.chrome.mp4

suggestion.before.@.on.space.remove.android.mp4

suggestion.before.@.on.space.remove.mac.desktop.mac.chrome.ios.both.mov

Recording.4759.mp4

Screen_Recording_20230928_080226_New.Expensify.1.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695458107547879

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0193240eea08f27c8d
• Upwork Job ID: 1706350665337753600
• Last Price Increase: 2023-09-25
• Automatic offers:
• cubuspl42 | Reviewer | 26974438
• paultsimura | Contributor | 26974441
• dhanashree-sawant | Reporter | 26974442

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @zanyrenney (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 @stephanieelliott (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 - @cubuspl42 (External)

[paultsimura]

Proposal

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

The mentions suggestion appears for a moment when the symbol before "@" is removed.

What is the root cause of that problem?

The root cause is in this hook:

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

Lines 235 to 237 in 26cd27f

	useEffect(() => {
	calculateMentionSuggestion(selection.end);
	}, [selection, calculateMentionSuggestion]);

It is supposed to run only when the selection changes. However, calculateMentionSuggestion is also in the dependencies list of this hook. And this function has the value in its dependencies list:

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

Line 232 in 26cd27f

[getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value],

This leads to the calculateMentionSuggestion function being changed every time a value is changed. And therefore the initial hook is called on every selection & value change.

The hook is called 2 times on every change:

1. With changed value but previous selection
2. With changed value and new selection

As a result, on step 1, the cursor is calculated as standing after the "@" sign:

And the menu becomes visible in this chunk of code until the step 2 takes place:

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

Lines 220 to 224 in 26cd27f

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

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

We should execute this hook only if the selection has changed:

Option 1 (preferred, although not lint-friendly):

    useEffect(() => {
        calculateMentionSuggestion(selection.end);
        
+       // we want this hook to run only on selection change
+       // eslint-disable-next-line react-hooks/exhaustive-deps
+   }, [selection]);
-   }, [selection, calculateMentionSuggestion]);

What alternative solutions did you explore? (Optional)

Option 2 (lint-friendly, but with more complex checks):

    const prevSelection = usePrevious(selection);
    const didSelectionChange = !_.isEqual(prevSelection, selection);

    useEffect(() => {
        if (!didSelectionChange) {
            return;
        }

        calculateMentionSuggestion(selection.end);
    }, [didSelectionChange, selection, calculateMentionSuggestion]);