fix: auto close dropdowns in the create issue modal when we navigate through keyboard

web/components/dropdowns/cycle/index.tsx

@@ -8,6 +8,7 @@ import { cn } from "@/helpers/common.helper";
 import { useCycle } from "@/hooks/store";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
 // components
 import { DropdownButton } from "../buttons";
 // icons
@@ -84,6 +85,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   return (
     <Combobox

web/components/dropdowns/date.tsx

@@ -9,6 +9,7 @@ import { renderFormattedDate, getDate } from "@/helpers/date-time.helper";
 // hooks
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
 // components
 import { DropdownButton } from "./buttons";
 // types
@@ -103,6 +104,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   const disabledDays: Matcher[] = [];
   if (minDate) disabledDays.push({ before: minDate });

web/components/dropdowns/estimate.tsx

@@ -9,6 +9,7 @@ import { cn } from "@/helpers/common.helper";
 import { useApplication, useEstimate } from "@/hooks/store";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
 // components
 import { DropdownButton } from "./buttons";
 // helpers
@@ -146,6 +147,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   useEffect(() => {
     if (isOpen && inputRef.current) {

web/components/dropdowns/member/index.tsx

@@ -7,6 +7,7 @@ import { cn } from "@/helpers/common.helper";
 import { useMember } from "@/hooks/store";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
 // components
 import { DropdownButton } from "../buttons";
 import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
@@ -84,6 +85,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   return (
     <Combobox

web/components/dropdowns/module/index.tsx

@@ -8,6 +8,7 @@ import { cn } from "@/helpers/common.helper";
 import { useModule } from "@/hooks/store";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import { DropdownButton } from "../buttons";
@@ -201,6 +202,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   const comboboxProps: any = {
     value,

web/components/dropdowns/priority.tsx

@@ -10,6 +10,7 @@ import { ISSUE_PRIORITIES } from "@/constants/issue";
 import { cn } from "@/helpers/common.helper";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // icons
 // helpers
@@ -360,12 +361,13 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
     ? BorderButton
     : BACKGROUND_BUTTON_VARIANTS.includes(buttonVariant)
-      ? BackgroundButton
-      : TransparentButton;
+    ? BackgroundButton
+    : TransparentButton;
 
   useEffect(() => {
     if (isOpen && inputRef.current) {

web/components/dropdowns/state.tsx

@@ -9,6 +9,7 @@ import { cn } from "@/helpers/common.helper";
 import { useApplication, useProjectState } from "@/hooks/store";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
 // components
 import { DropdownButton } from "./buttons";
 // icons
@@ -128,6 +129,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   useEffect(() => {
     if (isOpen && inputRef.current) {

web/components/issues/select/label.tsx

@@ -9,6 +9,7 @@ import { IssueLabelsList } from "@/components/ui";
 import { useLabel } from "@/hooks/store";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
 // ui
 // icons
 
@@ -76,6 +77,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   useEffect(() => {
     if (isDropdownOpen && inputRef.current) {

web/hooks/use-outside-keydown-detector.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+
+const useOutsideKeydownDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+};
+
+export default useOutsideKeydownDetector;