Merge pull request #38007 from FitseTLT/fix-menu-action-item-on-press…

…-up-bug Fix - Message action menu - Last option is not selected when pressing up key
Expensify · Mar 14, 2024 · 9a2796e · 9a2796e
2 parents aa46730 + 535cad7
commit 9a2796e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -112,6 +112,7 @@ function EmojiPickerMenu({forwardedRef, onEmojiSelected, activeEmoji}) {
         disableHorizontalKeys: isFocused,
         // We pass true without checking visibility of the component because if the popover is not visible this picker won't be mounted
         isActive: true,
+        allowNegativeIndexes: true,
     });
 
     const filterEmojis = _.throttle((searchTerm) => {

diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
@@ -12,6 +12,7 @@ type Config = {
     itemsPerRow?: number;
     disableCyclicTraversal?: boolean;
     disableHorizontalKeys?: boolean;
+    allowNegativeIndexes?: boolean;
 };
 
 type UseArrowKeyFocusManager = [number, (index: number) => void];
@@ -44,6 +45,7 @@ export default function useArrowKeyFocusManager({
     itemsPerRow,
     disableCyclicTraversal = false,
     disableHorizontalKeys = false,
+    allowNegativeIndexes = false,
 }: Config): UseArrowKeyFocusManager {
     const allowHorizontalArrowKeys = !!itemsPerRow;
     const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
@@ -84,7 +86,13 @@ export default function useArrowKeyFocusManager({
             while (disabledIndexes.includes(newFocusedIndex)) {
                 newFocusedIndex -= allowHorizontalArrowKeys ? itemsPerRow : 1;
                 if (newFocusedIndex < 0) {
-                    break;
+                    if (disableCyclicTraversal) {
+                        if (!allowNegativeIndexes) {
+                            return actualIndex;
+                        }
+                        break;
+                    }
+                    newFocusedIndex = maxIndex;
                 }
                 if (newFocusedIndex === currentFocusedIndex) {
                     // all indexes are disabled
@@ -93,7 +101,7 @@ export default function useArrowKeyFocusManager({
             }
             return newFocusedIndex;
         });
-    }, [allowHorizontalArrowKeys, disableCyclicTraversal, disabledIndexes, itemsPerRow, maxIndex]);
+    }, [allowHorizontalArrowKeys, disableCyclicTraversal, disabledIndexes, itemsPerRow, maxIndex, allowNegativeIndexes]);
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_UP, arrowUpCallback, arrowConfig);
 
@@ -127,8 +135,11 @@ export default function useArrowKeyFocusManager({
                     newFocusedIndex += allowHorizontalArrowKeys ? itemsPerRow : 1;
                 }
 
-                if (newFocusedIndex < 0) {
-                    break;
+                if (newFocusedIndex > maxIndex) {
+                    if (disableCyclicTraversal) {
+                        return actualIndex;
+                    }
+                    newFocusedIndex = 0;
                 }
                 if (newFocusedIndex === currentFocusedIndex) {
                     // all indexes are disabled