diff --git a/web/hooks/use-dropdown-key-down.tsx b/web/hooks/use-dropdown-key-down.tsx index 174cfdd8a..cc69906ce 100644 --- a/web/hooks/use-dropdown-key-down.tsx +++ b/web/hooks/use-dropdown-key-down.tsx @@ -9,23 +9,25 @@ type TUseDropdownKeyDown = { }; export const useDropdownKeyDown: TUseDropdownKeyDown = (onEnterKeyDown, onEscKeyDown, stopPropagation = true) => { - const stopEventPropagation = (event: React.KeyboardEvent) => { - if (stopPropagation) { - event.stopPropagation(); - event.preventDefault(); - } - }; + const stopEventPropagation = useCallback( + (event: React.KeyboardEvent) => { + if (stopPropagation) { + event.stopPropagation(); + event.preventDefault(); + } + }, + [stopPropagation] + ); const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key === "Enter") { stopEventPropagation(event); - onEnterKeyDown(); } else if (event.key === "Escape") { stopEventPropagation(event); onEscKeyDown(); - } + } else if (event.key === "Tab") onEscKeyDown(); }, [onEnterKeyDown, onEscKeyDown, stopEventPropagation] );