Fix mention suggestion highlight doesn't move when the text selection moves

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

@@ -227,7 +227,7 @@ function SuggestionEmoji(
         <EmojiSuggestions
             highlightedEmojiIndex={highlightedEmojiIndex}
             emojis={suggestionValues.suggestedEmojis}
-            prefix={value.slice(suggestionValues.colonIndex + 1, selection.start)}
+            prefix={value.slice(suggestionValues.colonIndex + 1, selection.end)}
             onSelect={insertSelectedEmoji}
             preferredSkinToneIndex={preferredSkinTone}
             isEmojiPickerLarge={!!isAutoSuggestionPickerLarge}

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

@@ -2,6 +2,7 @@ import Str from 'expensify-common/lib/str';
 import lodashSortBy from 'lodash/sortBy';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {Mention} from '@components/MentionSuggestions';
 import MentionSuggestions from '@components/MentionSuggestions';
@@ -219,19 +220,8 @@ function SuggestionMention(
                 return;
             }
 
-            const valueAfterTheCursor = value.substring(selectionEnd);
-            const indexOfFirstSpecialCharOrEmojiAfterTheCursor = valueAfterTheCursor.search(CONST.REGEX.MENTION_BREAKER);
-
-            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);
+            const leftString = value.substring(afterLastBreakLineIndex, selectionEnd);
             const words = leftString.split(CONST.REGEX.SPACE_OR_EMOJI);
             const lastWord: string = words.at(-1) ?? '';
             const secondToLastWord = words[words.length - 3];
@@ -261,9 +251,7 @@ function SuggestionMention(
                 mentionPrefix: prefix,
             };
 
-            const isCursorBeforeTheMention = valueAfterTheCursor.startsWith(suggestionWord);
-
-            if (!isCursorBeforeTheMention && isMentionCode(suggestionWord)) {
+            if (isMentionCode(suggestionWord)) {
                 const suggestions = getMentionOptions(personalDetails, prefix);
                 nextState.suggestedMentions = suggestions;
                 nextState.shouldShowSuggestionMenu = !!suggestions.length;
@@ -279,8 +267,12 @@ function SuggestionMention(
     );
 
     useEffect(() => {
+        if (!isComposerFocused) {
+            return;
+        }
         calculateMentionSuggestion(selection.end);
-    }, [selection, calculateMentionSuggestion]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isComposerFocused]);
 
     const updateShouldShowSuggestionMenuToFalse = useCallback(() => {
         setSuggestionValues((prevState) => {
@@ -300,16 +292,29 @@ function SuggestionMention(
 
     const getSuggestions = useCallback(() => suggestionValues.suggestedMentions, [suggestionValues]);
 
+    const onSelectionChange = useCallback(
+        (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+            /**
+             * we pass here e.nativeEvent.selection.end directly to calculateEmojiSuggestion
+             * because in other case calculateEmojiSuggestion will have an old calculation value
+             * of suggestion instead of current one
+             */
+            calculateMentionSuggestion(e.nativeEvent.selection.end);
+        },
+        [calculateMentionSuggestion],
+    );
+
     useImperativeHandle(
         ref,
         () => ({
             resetSuggestions,
             triggerHotkeyActions,
             setShouldBlockSuggestionCalc,
+            onSelectionChange,
             updateShouldShowSuggestionMenuToFalse,
             getSuggestions,
         }),
-        [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions],
+        [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions],
     );
 
     if (!isMentionSuggestionsMenuVisible) {

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

@@ -111,7 +111,8 @@ function Suggestions(
 
     const onSelectionChange = useCallback((e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
         const emojiHandler = suggestionEmojiRef.current?.onSelectionChange?.(e);
-        return emojiHandler;
+        const mentionHandler = suggestionMentionRef.current?.onSelectionChange?.(e);
+        return emojiHandler ?? mentionHandler;
     }, []);
 
     const updateShouldShowSuggestionMenuToFalse = useCallback(() => {