diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx index 5a59585ad72e..92c35d7c7685 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx @@ -10,6 +10,7 @@ import TextInput from '@components/TextInput'; import isTextInputFocused from '@components/TextInput/BaseTextInput/isTextInputFocused'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; +import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSingleExecution from '@hooks/useSingleExecution'; @@ -141,21 +142,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r return; } - // Select the currently highlighted emoji if enter is pressed if (!isEnterWhileComposition(keyBoardEvent) && keyBoardEvent.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { - let indexToSelect = focusedIndex; - if (highlightFirstEmoji) { - indexToSelect = 0; - } - - const item = filteredEmojis[indexToSelect]; - if (!item) { - return; - } - if ('types' in item || 'name' in item) { - const emoji = typeof preferredSkinTone === 'number' && item?.types?.[preferredSkinTone] ? item?.types?.[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. @@ -175,7 +162,32 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r searchInputRef.current.focus(); } }, - [filteredEmojis, focusedIndex, highlightFirstEmoji, isFocused, onEmojiSelected, preferredSkinTone], + [isFocused], + ); + + useKeyboardShortcut( + CONST.KEYBOARD_SHORTCUTS.ENTER, + (keyBoardEvent) => { + if (!(keyBoardEvent instanceof KeyboardEvent) || isEnterWhileComposition(keyBoardEvent) || keyBoardEvent.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { + return; + } + + // Select the currently highlighted emoji if enter is pressed + let indexToSelect = focusedIndex; + if (highlightFirstEmoji) { + indexToSelect = 0; + } + + const item = filteredEmojis[indexToSelect]; + if (!item) { + return; + } + if ('types' in item || 'name' in item) { + const emoji = typeof preferredSkinTone === 'number' && item?.types?.[preferredSkinTone] ? item?.types?.[preferredSkinTone] : item.code; + onEmojiSelected(emoji, item); + } + }, + {shouldPreventDefault: true, shouldStopPropagation: true}, ); /** diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx index 6532bf28ac41..26c2a9092131 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx @@ -151,7 +151,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps) return {}; }, [brickRoadIndicator]); - const {inputCallbackRef} = useAutoFocusInput(); + const {inputCallbackRef, inputRef} = useAutoFocusInput(); return ( {}} + onModalHide={() => { + inputRef.current?.focus(); + }} // eslint-disable-next-line @typescript-eslint/no-unused-vars onInputChange={(emoji: string): void => {}} />