From 8cf42602193141d96a67a9351be37e6843e1f221 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 3 May 2024 15:39:14 +0530
Subject: [PATCH] fix: dropdowns should close on tab key (#4351)

---
 web/hooks/use-dropdown-key-down.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

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<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]
   );