Merge pull request Expensify#27327 from WikusKriek/25649-mention-list…

…-does-not-pop-up Mention list popup issue on iOS
mikesmnx · Sep 18, 2023 · 0233376 · 0233376
2 parents 06e8d3a + 04551a3
commit 0233376
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 18 deletions.
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
@@ -42,12 +42,6 @@ const propTypes = {
     /** Callback when a emoji was inserted */
     onInsertedEmoji: PropTypes.func.isRequired,
 
-    /** The current selection */
-    selection: PropTypes.shape({
-        start: PropTypes.number.isRequired,
-        end: PropTypes.number.isRequired,
-    }).isRequired,
-
     ...SuggestionProps.baseProps,
 };
 

diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js
@@ -1,4 +1,4 @@
-import React, {useState, useCallback, useRef, useImperativeHandle} from 'react';
+import React, {useState, useCallback, useRef, useImperativeHandle, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -45,6 +45,7 @@ const defaultProps = {
 function SuggestionMention({
     value,
     setValue,
+    selection,
     setSelection,
     isComposerFullSize,
     personalDetails,
@@ -231,12 +232,9 @@ function SuggestionMention({
         [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value],
     );
 
-    const onSelectionChange = useCallback(
-        (e) => {
-            calculateMentionSuggestion(e.nativeEvent.selection.end);
-        },
-        [calculateMentionSuggestion],
-    );
+    useEffect(() => {
+        calculateMentionSuggestion(selection.end);
+    }, [selection, calculateMentionSuggestion]);
 
     const updateShouldShowSuggestionMenuToFalse = useCallback(() => {
         setSuggestionValues((prevState) => {
@@ -262,12 +260,11 @@ function SuggestionMention({
         forwardedRef,
         () => ({
             resetSuggestions,
-            onSelectionChange,
             triggerHotkeyActions,
             setShouldBlockSuggestionCalc,
             updateShouldShowSuggestionMenuToFalse,
         }),
-        [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse],
+        [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse],
     );
 
     if (!isMentionSuggestionsMenuVisible) {

diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.js b/src/pages/home/report/ReportActionCompose/Suggestions.js
@@ -66,8 +66,7 @@ function Suggestions({
 
     const onSelectionChange = useCallback((e) => {
         const emojiHandler = suggestionEmojiRef.current.onSelectionChange(e);
-        const mentionHandler = suggestionMentionRef.current.onSelectionChange(e);
-        return emojiHandler || mentionHandler;
+        return emojiHandler;
     }, []);
 
     const updateShouldShowSuggestionMenuToFalse = useCallback(() => {
@@ -102,6 +101,7 @@ function Suggestions({
         value,
         setValue,
         setSelection,
+        selection,
         isComposerFullSize,
         updateComment,
         composerHeight,
@@ -116,7 +116,6 @@ function Suggestions({
                 ref={suggestionEmojiRef}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...baseProps}
-                selection={selection}
                 onInsertedEmoji={onInsertedEmoji}
                 resetKeyboardInput={resetKeyboardInput}
             />

diff --git a/src/pages/home/report/ReportActionCompose/suggestionProps.js b/src/pages/home/report/ReportActionCompose/suggestionProps.js
@@ -7,6 +7,12 @@ const baseProps = {
     /** Callback to update the current input value */
     setValue: PropTypes.func.isRequired,
 
+    /** The current selection value */
+    selection: PropTypes.shape({
+        start: PropTypes.number.isRequired,
+        end: PropTypes.number.isRequired,
+    }).isRequired,
+
     /** Callback to update the current selection */
     setSelection: PropTypes.func.isRequired,