Merge pull request #47761 from Krishna2323/krishna2323/issue/47272

fix: clicking enter on emoji selector for status results in leaving status pane.
Expensify · Aug 28, 2024 · 6697c26 · 6697c26
2 parents 1810346 + 052cbf4
commit 6697c26
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git 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
@@ -151,7 +151,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
         return {};
     }, [brickRoadIndicator]);
 
-    const {inputCallbackRef} = useAutoFocusInput();
+    const {inputCallbackRef, inputRef} = useAutoFocusInput();
 
     return (
         <ScreenWrapper
@@ -186,7 +186,9 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
                             role={CONST.ROLE.PRESENTATION}
                             defaultValue={defaultEmoji}
                             style={styles.mb3}
-                            onModalHide={() => {}}
+                            onModalHide={() => {
+                                inputRef.current?.focus();
+                            }}
                             // eslint-disable-next-line @typescript-eslint/no-unused-vars
                             onInputChange={(emoji: string): void => {}}
                         />