Merge pull request #50333 from Expensify/revert-49589-@perunt/fix-sug…

…gestion-list-appear-on-input-initial-focus [CP Staging] Revert "Avoid suggestion box calculation on firs input focus" (cherry picked from commit 3141c43) (CP triggered by thienlnam)
Expensify · Oct 7, 2024 · d093f93 · d093f93
1 parent 04acab7
commit d093f93
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx
@@ -1,6 +1,6 @@
-import type {ForwardedRef} from 'react';
+import type {ForwardedRef, RefAttributes} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
-import {useOnyx} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import type {Emoji} from '@assets/emojis/types';
 import EmojiSuggestions from '@components/EmojiSuggestions';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
@@ -19,11 +19,17 @@ type SuggestionsValue = {
     shouldShowSuggestionMenu: boolean;
 };
 
-type SuggestionEmojiProps = SuggestionProps & {
-    /** Function to clear the input */
-    resetKeyboardInput?: () => void;
+type SuggestionEmojiOnyxProps = {
+    /** Preferred skin tone */
+    preferredSkinTone: number;
 };
 
+type SuggestionEmojiProps = SuggestionProps &
+    SuggestionEmojiOnyxProps & {
+        /** Function to clear the input */
+        resetKeyboardInput?: () => void;
+    };
+
 /**
  * Check if this piece of string looks like an emoji
  */
@@ -40,16 +46,23 @@ const defaultSuggestionsValues: SuggestionsValue = {
 };
 
 function SuggestionEmoji(
-    {value, selection, setSelection, updateComment, isAutoSuggestionPickerLarge, resetKeyboardInput, measureParentContainerAndReportCursor, isComposerFocused}: SuggestionEmojiProps,
+    {
+        preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE,
+        value,
+        selection,
+        setSelection,
+        updateComment,
+        isAutoSuggestionPickerLarge,
+        resetKeyboardInput,
+        measureParentContainerAndReportCursor,
+        isComposerFocused,
+    }: SuggestionEmojiProps,
     ref: ForwardedRef<SuggestionsRef>,
 ) {
     const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues);
     const suggestionValuesRef = useRef(suggestionValues);
-    const isInitialFocusRef = useRef(true);
     suggestionValuesRef.current = suggestionValues;
 
-    const [preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {selector: EmojiUtils.getPreferredSkinToneIndex});
-
     const isEmojiSuggestionsMenuVisible = suggestionValues.suggestedEmojis.length > 0 && suggestionValues.shouldShowSuggestionMenu;
 
     const [highlightedEmojiIndex, setHighlightedEmojiIndex] = useArrowKeyFocusManager({
@@ -144,10 +157,6 @@ function SuggestionEmoji(
                 resetSuggestions();
                 return;
             }
-            if (isInitialFocusRef.current) {
-                isInitialFocusRef.current = false;
-                return;
-            }
             const leftString = newValue.substring(0, selectionEnd);
             const colonIndex = leftString.lastIndexOf(':');
             const isCurrentlyShowingEmojiSuggestion = isEmojiCode(newValue, selectionEnd);
@@ -228,4 +237,9 @@ function SuggestionEmoji(
 
 SuggestionEmoji.displayName = 'SuggestionEmoji';
 
-export default forwardRef(SuggestionEmoji);
+export default withOnyx<SuggestionEmojiProps & RefAttributes<SuggestionsRef>, SuggestionEmojiOnyxProps>({
+    preferredSkinTone: {
+        key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
+        selector: EmojiUtils.getPreferredSkinToneIndex,
+    },
+})(forwardRef(SuggestionEmoji));
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx
@@ -89,7 +89,6 @@ function SuggestionMention(
     const {translate, formatPhoneNumber} = useLocalize();
     const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues);
     const suggestionValuesRef = useRef(suggestionValues);
-    const isInitialFocusRef = useRef(true);
     suggestionValuesRef.current = suggestionValues;
 
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
@@ -356,10 +355,6 @@ function SuggestionMention(
                 resetSuggestions();
                 return;
             }
-            if (isInitialFocusRef.current) {
-                isInitialFocusRef.current = false;
-                return;
-            }
 
             const afterLastBreakLineIndex = newValue.lastIndexOf('\n', selectionEnd - 1) + 1;
             const leftString = newValue.substring(afterLastBreakLineIndex, selectionEnd);