@@ -9,6 +9,16 @@ interface UseKeyboardNavigationProps {
99 onClose : ( ) => void ;
1010}
1111
12+ const keyboardEventKeys = {
13+ arrowDown : "ArrowDown" ,
14+ arrowUp : "ArrowUp" ,
15+ enter : "Enter" ,
16+ escape : "Escape" ,
17+ } as const ;
18+ 19+ type KeyboardEventKeys =
20+ ( typeof keyboardEventKeys ) [ keyof typeof keyboardEventKeys ] ;
21+ 1222export const useKeyboardNavigation = ( {
1323 items,
1424 isOpen,
@@ -20,25 +30,27 @@ export const useKeyboardNavigation = ({
2030 const handleKeyDown = ( event : React . KeyboardEvent ) => {
2131 if ( ! isOpen ) return ;
2232
23- switch ( event . key ) {
24- case "ArrowDown" :
25- event . preventDefault ( ) ;
26- setFocusedIndex ( ( prev ) => ( prev < items . length - 1 ? prev + 1 : 0 ) ) ;
27- break ;
28- case "ArrowUp" :
29- event . preventDefault ( ) ;
30- setFocusedIndex ( ( prev ) => ( prev > 0 ? prev - 1 : items . length - 1 ) ) ;
31- break ;
32- case "Enter" :
33- event . preventDefault ( ) ;
34- if ( focusedIndex >= 0 ) {
35- onSelect ( items [ focusedIndex ] ) ;
36- }
37- break ;
38- case "Escape" :
39- event . preventDefault ( ) ;
40- onClose ( ) ;
41- break ;
33+ const key = event . key as KeyboardEventKeys ;
34+ 35+ if ( Object . values ( keyboardEventKeys ) . includes ( key ) ) {
36+ event . preventDefault ( ) ;
37+ 38+ switch ( key ) {
39+ case "ArrowDown" :
40+ setFocusedIndex ( ( prev ) => ( prev < items . length - 1 ? prev + 1 : 0 ) ) ;
41+ break ;
42+ case "ArrowUp" :
43+ setFocusedIndex ( ( prev ) => ( prev > 0 ? prev - 1 : items . length - 1 ) ) ;
44+ break ;
45+ case "Enter" :
46+ if ( focusedIndex >= 0 ) {
47+ onSelect ( items [ focusedIndex ] ) ;
48+ }
49+ break ;
50+ case "Escape" :
51+ onClose ( ) ;
52+ break ;
53+ }
4254 }
4355 } ;
4456
0 commit comments