fix: dropdowns should close on tab key

makeplane · May 3, 2024 · 41adf4e · 41adf4e
1 parent a678844
commit 41adf4e
Showing 1 changed file with 10 additions and 8 deletions.
diff --git 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<HTMLElement>) => {
-    if (stopPropagation) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  };
+  const stopEventPropagation = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [stopPropagation]
+  );
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (event.key === "Enter") {
         stopEventPropagation(event);
-
         onEnterKeyDown();
       } else if (event.key === "Escape") {
         stopEventPropagation(event);
         onEscKeyDown();
-      }
+      } else if (event.key === "Tab") onEscKeyDown();
     },
     [onEnterKeyDown, onEscKeyDown, stopEventPropagation]
   );