[$250] Сhat - Mention suggestion box does not close when selecting mention in previously empty line

[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: 9.2.63-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: #74916
Email or phone of affected tester (no customers): dreamnitethedragon+yydyd373@gmail.com
**Issue reported by:**Applause - Internal Team

Action Performed:

1. Launch app
2. Open chat
3. Enter @ and select a mention
4. Note after selecting mention, suggestion box is closed
5. In next line enter a text
6. Leave next line as empty space
7. In next line enter a text
8. In next line enter @ and select a mention
   9.Note after selecting mention, suggestion box is closed
9. Now in empty space (step 6) enter @ and select a mention from suggestion box
10. Now note suggestion box is not closed

Expected Result:

After selecting a mention from the suggestion box in any line (including lines that were previously empty), the suggestion box should close automatically — same behavior as seen when selecting mentions in other lines

Actual Result:

When a mention is selected in a line that was previously left empty (Step 10), the suggestion box remains open and does not close automatically

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug7013060_1764076830686.Screenrecorder-2025-11-25-18-42-35-518.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021994258802785673429
• Upwork Job ID: 1994258802785673429
• Last Price Increase: 2026-01-02

Issue Owner

Current Issue Owner: @huult

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lorretheboy]

Proposal

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

When a mention is selected in a line that was previously left empty (Step 10), the suggestion box remains open and does not close automatically

What is the root cause of that problem?

We don't block suggestion calculation to prevent the menu from reopening when the value changes so that there is a race condition in React state updates

When a mention is selected, insertSelectedMention calls:

1. updateComment() - updates the text value
2. setSelection() - updates the cursor position
3. setSuggestionValues() - closes the menu

React batches these state updates, but the useEffect that watches value and selection triggers with the text inserted mention up to date BUT old still pointing to where the @ was typed

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

We should block suggestion calculation to prevent the menu from reopening when the value changes

shouldBlockCalc.current = true;

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

Line 79 in f96aa2a

shouldBlockCalc.current = true;

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

Line 213 in d0a86f2

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[abbasifaizan70]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-28 20:35:28 UTC.

Proposal

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

When selecting a mention from the suggestion box in a line that was previously left empty on Android native, the suggestion box remains open and does not close automatically. This is inconsistent with the expected behavior where the suggestion box should close after selecting a mention in any line. This issue only occurs on Android native; it works correctly on iOS native and web platforms.

What is the root cause of that problem?

The root cause is specific to Android native: after selecting a mention, onSelectionChange is triggered twice with different selection values, which doesn't happen on iOS native or web platforms. This double-trigger causes the suggestion calculation to run incorrectly and reopen the suggestion box.

Why this happens on Android native:

1. insertSelectedMention updates the comment value and selection position
2. On Android native, onSelectionChange is triggered twice with different selection values after the mention is inserted
3. The first onSelectionChange has one set of selection values
4. The second onSelectionChange has different selection values (this is the Android native specific behavior)
5. Each onSelectionChange triggers the useEffect hook which calls debouncedCalculateMentionSuggestion
6. The second trigger causes calculateMentionSuggestion to run again, and when the cursor is positioned right after the inserted mention code (which contains an @ symbol), the function detects the @ symbol again and reopens the suggestion box

Why it works on iOS native and web:

• On these platforms, onSelectionChange is triggered only once after inserting a mention, with consistent selection values
• The existing checks in the code are sufficient to prevent the suggestion box from reopening

Comparison:

• Android native: onSelectionChange fires twice with different values → suggestion box reopens
• iOS native/web: onSelectionChange fires once with consistent values → suggestion box closes correctly

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

1. Add Android native platform detection: Import getPlatform to detect when running on Android native.

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

   import getPlatform from '@libs/getPlatform';
   import type {TextInputSelectionChangeEvent} from 'react-native';
   
   // Inside the component:
   const isAndroidNative = getPlatform() === CONST.PLATFORM.ANDROID;

2. Block suggestion calculation on Android native after insertion: In insertSelectedMention, on Android native, set flags to temporarily block the debounced calculation and ignore the next selection change.

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

   suggestionInsertionIndexRef.current = selectionPosition;
   
   // On Android native, onSelectionChange is triggered twice after inserting a mention
   // Block the suggestion calculation temporarily to prevent the suggestion box from reopening
   if (isAndroidNative) {
       shouldBlockCalc.current = true;
       shouldIgnoreNextSelectionChangeRef.current = true;
       // Reset the flag after a short delay to allow normal selection changes
       setTimeout(() => {
           shouldIgnoreNextSelectionChangeRef.current = false;
       }, 100);
   }

3. Add insertion position check in calculation for Android native: In calculateMentionSuggestion, add an early return check that prevents showing suggestions when the cursor is at the exact position where a mention was just inserted on Android native.

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

   // On Android native, after inserting a mention, onSelectionChange is triggered twice with different values
   // If the cursor is at the position where we just inserted a mention, don't show suggestions
   // This prevents the suggestion box from reopening after inserting a mention, especially in previously empty lines
   if (isAndroidNative && suggestionInsertionIndexRef.current !== null && selectionEnd === suggestionInsertionIndexRef.current) {
       resetSuggestions();
       return;
   }

4. Add onSelectionChange handler for Android native: Add an onSelectionChange method to track selection changes on Android native and work with the insertion position check.

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

   // Track if we're on Android native platform
   const isAndroidNative = getPlatform() === CONST.PLATFORM.ANDROID;
   
   // On Android native, track the last selection change to detect duplicate triggers
   const lastSelectionChangeRef = useRef<{start: number; end: number} | null>(null);
   const shouldIgnoreNextSelectionChangeRef = useRef(false);
   
   const onSelectionChange = useCallback(
       (e: TextInputSelectionChangeEvent) => {
           if (!isAndroidNative) {
               return;
           }
           
           const {start, end} = e.nativeEvent.selection;
           lastSelectionChangeRef.current = {start, end};
           
           // If we're ignoring the next selection change and it's at the insertion position, 
           // we can clear the flag early since calculateMentionSuggestion will handle it
           if (shouldIgnoreNextSelectionChangeRef.current && suggestionInsertionIndexRef.current !== null && end === suggestionInsertionIndexRef.current) {
               setTimeout(() => {
                   shouldIgnoreNextSelectionChangeRef.current = false;
               }, 50);
           }
       },
       [isAndroidNative],
   );

5. Expose onSelectionChange in useImperativeHandle: Add onSelectionChange to the exposed methods so it can be called from the parent component.

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

   useImperativeHandle(
       ref,
       () => ({
           resetSuggestions,
           triggerHotkeyActions,
           setShouldBlockSuggestionCalc,
           updateShouldShowSuggestionMenuToFalse,
           getSuggestions,
           getIsSuggestionsMenuVisible,
           onSelectionChange,
       }),
       [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions, getIsSuggestionsMenuVisible, onSelectionChange],
   );

What alternative solutions did you explore? (Optional)

N/A

Demo

Screen.Recording.2025-11-29.at.1.32.29.AM.mov

[melvin-bot]

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

[melvin-bot]

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