Merge pull request #49589 from margelo/@perunt/fix-suggestion-list-ap…

…pear-on-input-initial-focus Avoid suggestion box calculation on firs input focus
Expensify · Oct 4, 2024 · 1229844 · 1229844
2 parents f83b69e + 49d5ad2
commit 1229844
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 28 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, RefAttributes} from 'react';
+import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {Emoji} from '@assets/emojis/types';
 import EmojiSuggestions from '@components/EmojiSuggestions';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
@@ -19,17 +19,11 @@ type SuggestionsValue = {
     shouldShowSuggestionMenu: boolean;
 };
 
-type SuggestionEmojiOnyxProps = {
-    /** Preferred skin tone */
-    preferredSkinTone: number;
+type SuggestionEmojiProps = SuggestionProps & {
+    /** Function to clear the input */
+    resetKeyboardInput?: () => void;
 };
 
-type SuggestionEmojiProps = SuggestionProps &
-    SuggestionEmojiOnyxProps & {
-        /** Function to clear the input */
-        resetKeyboardInput?: () => void;
-    };
-
 /**
  * Check if this piece of string looks like an emoji
  */
@@ -46,23 +40,16 @@ const defaultSuggestionsValues: SuggestionsValue = {
 };
 
 function SuggestionEmoji(
-    {
-        preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE,
-        value,
-        selection,
-        setSelection,
-        updateComment,
-        isAutoSuggestionPickerLarge,
-        resetKeyboardInput,
-        measureParentContainerAndReportCursor,
-        isComposerFocused,
-    }: SuggestionEmojiProps,
+    {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({
@@ -157,6 +144,10 @@ 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);
@@ -237,9 +228,4 @@ function SuggestionEmoji(
 
 SuggestionEmoji.displayName = 'SuggestionEmoji';
 
-export default withOnyx<SuggestionEmojiProps & RefAttributes<SuggestionsRef>, SuggestionEmojiOnyxProps>({
-    preferredSkinTone: {
-        key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
-        selector: EmojiUtils.getPreferredSkinToneIndex,
-    },
-})(forwardRef(SuggestionEmoji));
+export default forwardRef(SuggestionEmoji);
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx
@@ -89,6 +89,7 @@ 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);
@@ -355,6 +356,10 @@ 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);