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 78ffc7f87209..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); @@ -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