diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 25a40a709658..ecfcdd70336f 100755 --- 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 index 7a674b46c337..b11999d61cf3 100644 --- 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); @@ -85,6 +87,9 @@ export default function useArrowKeyFocusManager({ newFocusedIndex -= allowHorizontalArrowKeys ? itemsPerRow : 1; if (newFocusedIndex < 0) { if (disableCyclicTraversal) { + if (!allowNegativeIndexes) { + return actualIndex; + } break; } newFocusedIndex = maxIndex; @@ -96,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);