Merge pull request #38361 from allroundexperts/fix-38358

fix: allow suggestion menu to close once a mention is chosen

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

@@ -56,6 +56,16 @@ function SuggestionMention(
         shouldExcludeTextAreaNodes: false,
     });
 
+    // Used to store the selection index of the last inserted mention
+    const suggestionInsertionIndexRef = useRef<number | null>(null);
+
+    // Used to detect if the selection has changed since the last suggestion insertion
+    // If so, we reset the suggestionInsertionIndexRef
+    const hasSelectionChanged = !(selection.end === selection.start && selection.start === suggestionInsertionIndexRef.current);
+    if (hasSelectionChanged) {
+        suggestionInsertionIndexRef.current = null;
+    }
+
     // Used to decide whether to block the suggestions list from showing to prevent flickering
     const shouldBlockCalc = useRef(false);
 
@@ -89,10 +99,12 @@ function SuggestionMention(
             const commentAfterMention = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1);
 
             updateComment(`${commentBeforeAtSign}${mentionCode} ${SuggestionsUtils.trimLeadingSpace(commentAfterMention)}`, true);
+            const selectionPosition = suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH;
             setSelection({
-                start: suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH,
-                end: suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH,
+                start: selectionPosition,
+                end: selectionPosition,
             });
+            suggestionInsertionIndexRef.current = selectionPosition;
             setSuggestionValues((prevState) => ({
                 ...prevState,
                 suggestedMentions: [],
@@ -167,6 +179,14 @@ function SuggestionMention(
                 if (searchValue && !displayText.toLowerCase().includes(searchValue.toLowerCase())) {
                     return false;
                 }
+
+                // Given the mention is inserted by user, we don't want to show the mention options unless the
+                // selection index changes. In that case, suggestionInsertionIndexRef.current will be null.
+                // See https://github.com/Expensify/App/issues/38358 for more context
+                if (suggestionInsertionIndexRef.current) {
+                    return false;
+                }
+
                 return true;
             });
 
@@ -247,7 +267,6 @@ function SuggestionMention(
 
             if (!isCursorBeforeTheMention && isMentionCode(suggestionWord)) {
                 const suggestions = getMentionOptions(personalDetails, prefix);
-
                 nextState.suggestedMentions = suggestions;
                 nextState.shouldShowSuggestionMenu = !!suggestions.length;
             }
@@ -268,7 +287,6 @@ function SuggestionMention(
             // See: https://github.com/facebook/react-native/pull/36930#issuecomment-1593028467
             return;
         }
-
         calculateMentionSuggestion(selection.end);
     }, [selection, value, previousValue, calculateMentionSuggestion]);