Merge pull request #50971 from bernhardoj/fix/50561-enter-doesnt-pres…

…s-emoji-category-button Fix pressing enter doesn't select the emoji category
Expensify · Oct 25, 2024 · 44c9260 · 44c9260
2 parents ed242f5 + 668973c
commit 44c9260
Showing 1 changed file with 8 additions and 10 deletions.
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx
@@ -119,6 +119,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
             setFilteredEmojis(allEmojis);
             setHeaderIndices(headerRowIndices);
             setFocusedIndex(-1);
+            setHighlightFirstEmoji(false);
             setHighlightEmoji(false);
             return;
         }
@@ -139,14 +140,6 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
                 return;
             }
 
-            if (!isEnterWhileComposition(keyBoardEvent) && keyBoardEvent.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
-                // On web, avoid this Enter default input action; otherwise, it will add a new line in the subsequently focused composer.
-                keyBoardEvent.preventDefault();
-                // On mWeb, avoid propagating this Enter keystroke to Pressable child component; otherwise, it will trigger the onEmojiSelected callback again.
-                keyBoardEvent.stopPropagation();
-                return;
-            }
-
             // Enable keyboard movement if tab or enter is pressed or if shift is pressed while the input
             // is not focused, so that the navigation and tab cycling can be done using the keyboard without
             // interfering with the input behaviour.
@@ -182,9 +175,13 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
             if ('types' in item || 'name' in item) {
                 const emoji = typeof preferredSkinTone === 'number' && preferredSkinTone !== -1 && item?.types?.at(preferredSkinTone) ? item.types.at(preferredSkinTone) : item.code;
                 onEmojiSelected(emoji ?? '', item);
+                // On web, avoid this Enter default input action; otherwise, it will add a new line in the subsequently focused composer.
+                keyBoardEvent.preventDefault();
+                // On mWeb, avoid propagating this Enter keystroke to Pressable child component; otherwise, it will trigger the onEmojiSelected callback again.
+                keyBoardEvent.stopPropagation();
             }
         },
-        {shouldPreventDefault: true, shouldStopPropagation: true},
+        {shouldPreventDefault: false},
     );
 
     /**
@@ -239,8 +236,9 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
 
             const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT;
             emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true});
+            setFocusedIndex(headerIndex);
         },
-        [emojiListRef],
+        [emojiListRef, setFocusedIndex],
     );
 
     /**