diff --git a/src/hooks/useKeyboardNavigation.ts b/src/hooks/useKeyboardNavigation.ts index 7b814e78..46bda82c 100644 --- a/src/hooks/useKeyboardNavigation.ts +++ b/src/hooks/useKeyboardNavigation.ts @@ -9,6 +9,16 @@ interface UseKeyboardNavigationProps { onClose: () => void; } +const keyboardEventKeys = { + arrowDown: "ArrowDown", + arrowUp: "ArrowUp", + enter: "Enter", + escape: "Escape", +} as const; + +type KeyboardEventKeys = + (typeof keyboardEventKeys)[keyof typeof keyboardEventKeys]; + export const useKeyboardNavigation = ({ items, isOpen, @@ -20,25 +30,27 @@ export const useKeyboardNavigation = ({ const handleKeyDown = (event: React.KeyboardEvent) => { if (!isOpen) return; - switch (event.key) { - case "ArrowDown": - event.preventDefault(); - setFocusedIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0)); - break; - case "ArrowUp": - event.preventDefault(); - setFocusedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1)); - break; - case "Enter": - event.preventDefault(); - if (focusedIndex >= 0) { - onSelect(items[focusedIndex]); - } - break; - case "Escape": - event.preventDefault(); - onClose(); - break; + const key = event.key as KeyboardEventKeys; + + if (Object.values(keyboardEventKeys).includes(key)) { + event.preventDefault(); + + switch (key) { + case "ArrowDown": + setFocusedIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0)); + break; + case "ArrowUp": + setFocusedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1)); + break; + case "Enter": + if (focusedIndex >= 0) { + onSelect(items[focusedIndex]); + } + break; + case "Escape": + onClose(); + break; + } } };