chore: updated tab navigation logic in the issue modal

web/components/dropdowns/cycle/index.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useRef, useState } from "react";
+import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronDown } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -8,7 +8,6 @@ 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
@@ -24,6 +23,8 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: string | null) => void;
+  isDropdownOpened?: boolean;
+  onOpen?: () => void;
   onClose?: () => void;
   projectId: string;
   value: string | null;
@@ -41,6 +42,8 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    isDropdownOpened,
+    onOpen: onDropdownOpen,
     onClose,
     placeholder = "Cycle",
     placement,
@@ -68,6 +71,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
 
   const toggleDropdown = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (!isOpen) onDropdownOpen && onDropdownOpen();
     if (isOpen) onClose && onClose();
   };
 
@@ -85,7 +89,13 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
-  useOutsideKeydownDetector(dropdownRef, handleClose);
+
+  useEffect(() => {
+    if (isDropdownOpened && !isOpen) setIsOpen(true);
+  }, [isDropdownOpened, isOpen]);
+  useEffect(() => {
+    if (isDropdownOpened === false) setIsOpen(false);
+  }, [isDropdownOpened]);
 
   return (
     <Combobox

web/components/dropdowns/date.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { DayPicker, Matcher } from "react-day-picker";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
@@ -9,7 +9,6 @@ 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
@@ -24,6 +23,8 @@ type Props = TDropdownProps & {
   minDate?: Date;
   maxDate?: Date;
   onChange: (val: Date | null) => void;
+  isDropdownOpened?: boolean;
+  onOpen?: () => void;
   onClose?: () => void;
   value: Date | string | null;
   closeOnSelect?: boolean;
@@ -44,6 +45,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
     minDate,
     maxDate,
     onChange,
+    isDropdownOpened,
+    onOpen: onDropdownOpen,
     onClose,
     placeholder = "Date",
     placement,
@@ -85,7 +88,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
   };
 
   const toggleDropdown = () => {
-    if (!isOpen) onOpen();
+    if (!isOpen) {
+      onOpen();
+      onDropdownOpen && onDropdownOpen();
+    }
     setIsOpen((prevIsOpen) => !prevIsOpen);
     if (isOpen) onClose && onClose();
   };
@@ -104,12 +110,18 @@ export const DateDropdown: React.FC<Props> = (props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
-  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   const disabledDays: Matcher[] = [];
   if (minDate) disabledDays.push({ before: minDate });
   if (maxDate) disabledDays.push({ after: maxDate });
 
+  useEffect(() => {
+    if (isDropdownOpened && !isOpen) setIsOpen(true);
+  }, [isDropdownOpened, isOpen]);
+  useEffect(() => {
+    if (isDropdownOpened === false) setIsOpen(false);
+  }, [isDropdownOpened]);
+
   return (
     <Combobox
       as="div"

web/components/dropdowns/estimate.tsx

@@ -9,7 +9,6 @@ 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
@@ -23,6 +22,8 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: number | null) => void;
+  isDropdownOpened?: boolean;
+  onOpen?: () => void;
   onClose?: () => void;
   projectId: string;
   value: number | null;
@@ -48,6 +49,8 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    isDropdownOpened,
+    onOpen: onDropdownOpen,
     onClose,
     placeholder = "Estimate",
     placement,
@@ -121,7 +124,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   };
 
   const toggleDropdown = () => {
-    if (!isOpen) onOpen();
+    if (!isOpen) {
+      onOpen();
+      onDropdownOpen && onDropdownOpen();
+    }
     setIsOpen((prevIsOpen) => !prevIsOpen);
     if (isOpen) onClose && onClose();
   };
@@ -147,7 +153,6 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
-  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   useEffect(() => {
     if (isOpen && inputRef.current) {
@@ -155,6 +160,13 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     }
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isDropdownOpened && !isOpen) setIsOpen(true);
+  }, [isDropdownOpened, isOpen]);
+  useEffect(() => {
+    if (isDropdownOpened === false) setIsOpen(false);
+  }, [isDropdownOpened]);
+
   return (
     <Combobox
       as="div"

web/components/dropdowns/member/index.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronDown } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -7,7 +7,6 @@ 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";
@@ -20,6 +19,8 @@ import { MemberDropdownProps } from "./types";
 
 type Props = {
   projectId?: string;
+  isDropdownOpened?: boolean;
+  onOpen?: () => void;
   onClose?: () => void;
 } & MemberDropdownProps;
 
@@ -36,6 +37,8 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     hideIcon = false,
     multiple,
     onChange,
+    isDropdownOpened,
+    onOpen: onDropdownOpen,
     onClose,
     placeholder = "Members",
     placement,
@@ -68,6 +71,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
 
   const toggleDropdown = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (!isOpen) onDropdownOpen && onDropdownOpen();
     if (isOpen) onClose && onClose();
   };
 
@@ -85,7 +89,13 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
-  useOutsideKeydownDetector(dropdownRef, handleClose);
+
+  useEffect(() => {
+    if (isDropdownOpened && !isOpen) setIsOpen(true);
+  }, [isDropdownOpened, isOpen]);
+  useEffect(() => {
+    if (isDropdownOpened === false) setIsOpen(false);
+  }, [isDropdownOpened]);
 
   return (
     <Combobox

web/components/dropdowns/module/index.tsx

@@ -8,7 +8,6 @@ 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";
@@ -26,6 +25,8 @@ type Props = TDropdownProps & {
   dropdownArrowClassName?: string;
   projectId: string;
   showCount?: boolean;
+  isDropdownOpened?: boolean;
+  onOpen?: () => void;
   onClose?: () => void;
 } & (
     | {
@@ -158,6 +159,8 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     hideIcon = false,
     multiple,
     onChange,
+    isDropdownOpened,
+    onOpen: onDropdownOpen,
     onClose,
     placeholder = "Module",
     placement,
@@ -185,6 +188,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
 
   const toggleDropdown = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (!isOpen) onDropdownOpen && onDropdownOpen();
     if (isOpen) onClose && onClose();
   };
 
@@ -202,7 +206,6 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
-  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   const comboboxProps: any = {
     value,
@@ -217,6 +220,13 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     }
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isDropdownOpened && !isOpen) setIsOpen(true);
+  }, [isDropdownOpened, isOpen]);
+  useEffect(() => {
+    if (isDropdownOpened === false) setIsOpen(false);
+  }, [isDropdownOpened]);
+
   return (
     <Combobox
       as="div"

web/components/dropdowns/priority.tsx

@@ -10,7 +10,6 @@ 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
@@ -25,6 +24,8 @@ type Props = TDropdownProps & {
   dropdownArrowClassName?: string;
   highlightUrgent?: boolean;
   onChange: (val: TIssuePriorities) => void;
+  isDropdownOpened?: boolean;
+  onOpen?: () => void;
   onClose?: () => void;
   value: TIssuePriorities;
 };
@@ -284,6 +285,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     hideIcon = false,
     highlightUrgent = true,
     onChange,
+    isDropdownOpened,
+    onOpen: onDropdownOpen,
     onClose,
     placement,
     showTooltip = false,
@@ -337,6 +340,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
 
   const toggleDropdown = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (!isOpen) onDropdownOpen && onDropdownOpen();
     if (isOpen) onClose && onClose();
   };
 
@@ -361,7 +365,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
-  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
     ? BorderButton
@@ -375,6 +378,13 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     }
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isDropdownOpened && !isOpen) setIsOpen(true);
+  }, [isDropdownOpened, isOpen]);
+  useEffect(() => {
+    if (isDropdownOpened === false) setIsOpen(false);
+  }, [isDropdownOpened]);
+
   return (
     <Combobox
       as="div"

web/components/dropdowns/state.tsx

@@ -9,7 +9,6 @@ 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
@@ -24,6 +23,8 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: string) => void;
+  isDropdownOpened?: boolean;
+  onOpen?: () => void;
   onClose?: () => void;
   projectId: string;
   value: string;
@@ -41,6 +42,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    isDropdownOpened,
+    onOpen: onDropdownOpen,
     onClose,
     placement,
     projectId,
@@ -103,7 +106,10 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   };
 
   const toggleDropdown = () => {
-    if (!isOpen) onOpen();
+    if (!isOpen) {
+      onOpen();
+      onDropdownOpen && onDropdownOpen();
+    }
     setIsOpen((prevIsOpen) => !prevIsOpen);
     if (isOpen) onClose && onClose();
   };
@@ -129,13 +135,18 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
-  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   useEffect(() => {
     if (isOpen && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isOpen]);
+  useEffect(() => {
+    if (isDropdownOpened && !isOpen) setIsOpen(true);
+  }, [isDropdownOpened, isOpen]);
+  useEffect(() => {
+    if (isDropdownOpened === false) setIsOpen(false);
+  }, [isDropdownOpened]);
 
   return (
     <Combobox

web/components/issues/issue-modal/form.tsx

@@ -5,9 +5,9 @@ import { Controller, useForm } from "react-hook-form";
 import { LayoutPanelTop, Sparkle, X } from "lucide-react";
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import type { TIssue, ISearchIssueResponse } from "@plane/types";
-// editor
 // hooks
 import { Button, CustomMenu, Input, Loader, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
+// components
 import { GptAssistantPopover } from "@/components/core";
 import {
   CycleDropdown,
@@ -22,17 +22,15 @@ import {
 import { ParentIssuesListModal } from "@/components/issues";
 import { IssueLabelSelect } from "@/components/issues/select";
 import { CreateLabelModal } from "@/components/labels";
+// helpers
 import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
 import { getChangedIssuefields } from "@/helpers/issue.helper";
 import { shouldRenderProject } from "@/helpers/project.helper";
+// hooks
 import { useApplication, useEstimate, useIssueDetail, useMention, useProject, useWorkspace } from "@/hooks/store";
 // services
 import { AIService } from "@/services/ai.service";
 import { FileService } from "@/services/file.service";
-// components
-// ui
-// helpers
-// types
 
 const defaultValues: Partial<TIssue> = {
   project_id: "",
@@ -66,6 +64,19 @@ export interface IssueFormProps {
 const aiService = new AIService();
 const fileService = new FileService();
 
+type TCurrentDropdownChoices =
+  | "state_id"
+  | "priority"
+  | "assignee_ids"
+  | "label_ids"
+  | "start_date"
+  | "target_date"
+  | "cycle_id"
+  | "module_ids"
+  | "estimate_point"
+  | "parent_id"
+  | undefined;
+
 const TAB_INDICES = [
   "name",
   "description_html",
@@ -109,6 +120,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+  const [currentDropdownState, setCurrentDropdownState] = useState<TCurrentDropdownChoices>(undefined);
+  const handleCurrentDropdownState = (value: TCurrentDropdownChoices) => setCurrentDropdownState(value);
 
   // refs
   const editorRef = useRef<any>(null);
@@ -493,10 +506,15 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         projectId={projectId}
                         buttonVariant="border-with-text"
                         tabIndex={getTabIndex("state_id")}
+                        // handling the current dropdown state
+                        isDropdownOpened={currentDropdownState === "state_id" ? true : false}
+                        onOpen={() => handleCurrentDropdownState("state_id")}
+                        onClose={() => handleCurrentDropdownState(undefined)}
                       />
                     </div>
                   )}
                 />
+
                 <Controller
                   control={control}
                   name="priority"
@@ -510,6 +528,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         }}
                         buttonVariant="border-with-text"
                         tabIndex={getTabIndex("priority")}
+                        // handling the current dropdown state
+                        isDropdownOpened={currentDropdownState === "priority" ? true : false}
+                        onOpen={() => handleCurrentDropdownState("priority")}
+                        onClose={() => handleCurrentDropdownState(undefined)}
                       />
                     </div>
                   )}
@@ -531,6 +553,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         placeholder="Assignees"
                         multiple
                         tabIndex={getTabIndex("assignee_ids")}
+                        // handling the current dropdown state
+                        isDropdownOpened={currentDropdownState === "assignee_ids" ? true : false}
+                        onOpen={() => handleCurrentDropdownState("assignee_ids")}
+                        onClose={() => handleCurrentDropdownState(undefined)}
                       />
                     </div>
                   )}
@@ -539,7 +565,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   control={control}
                   name="label_ids"
                   render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
+                    <div className="h-7" tabIndex={getTabIndex("label_ids")}>
                       <IssueLabelSelect
                         setIsOpen={setLabelModal}
                         value={value}
@@ -549,6 +575,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         }}
                         projectId={projectId}
                         tabIndex={getTabIndex("label_ids")}
+                        // handling the current dropdown state
+                        isDropdownOpened={currentDropdownState === "label_ids" ? true : false}
+                        onOpen={() => handleCurrentDropdownState("label_ids")}
+                        onClose={() => handleCurrentDropdownState(undefined)}
                       />
                     </div>
                   )}
@@ -565,6 +595,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         maxDate={maxDate ?? undefined}
                         placeholder="Start date"
                         tabIndex={getTabIndex("start_date")}
+                        // handling the current dropdown state
+                        isDropdownOpened={currentDropdownState === "start_date" ? true : false}
+                        onOpen={() => handleCurrentDropdownState("start_date")}
+                        onClose={() => handleCurrentDropdownState(undefined)}
                       />
                     </div>
                   )}
@@ -581,6 +615,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         minDate={minDate ?? undefined}
                         placeholder="Due date"
                         tabIndex={getTabIndex("target_date")}
+                        // handling the current dropdown state
+                        isDropdownOpened={currentDropdownState === "target_date" ? true : false}
+                        onOpen={() => handleCurrentDropdownState("target_date")}
+                        onClose={() => handleCurrentDropdownState(undefined)}
                       />
                     </div>
                   )}
@@ -600,6 +638,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           value={value}
                           buttonVariant="border-with-text"
                           tabIndex={getTabIndex("cycle_id")}
+                          // handling the current dropdown state
+                          isDropdownOpened={currentDropdownState === "cycle_id" ? true : false}
+                          onOpen={() => handleCurrentDropdownState("cycle_id")}
+                          onClose={() => handleCurrentDropdownState(undefined)}
                         />
                       </div>
                     )}
@@ -622,6 +664,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           tabIndex={getTabIndex("module_ids")}
                           multiple
                           showCount
+                          // handling the current dropdown state
+                          isDropdownOpened={currentDropdownState === "module_ids" ? true : false}
+                          onOpen={() => handleCurrentDropdownState("module_ids")}
+                          onClose={() => handleCurrentDropdownState(undefined)}
                         />
                       </div>
                     )}
@@ -642,6 +688,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           projectId={projectId}
                           buttonVariant="border-with-text"
                           tabIndex={getTabIndex("estimate_point")}
+                          // handling the current dropdown state
+                          isDropdownOpened={currentDropdownState === "estimate_point" ? true : false}
+                          onOpen={() => handleCurrentDropdownState("estimate_point")}
+                          onClose={() => handleCurrentDropdownState(undefined)}
                         />
                       </div>
                     )}
@@ -672,6 +722,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   }
                   placement="bottom-start"
                   tabIndex={getTabIndex("parent_id")}
+                  onOpen={() => handleCurrentDropdownState("parent_id")}
+                  onMenuClose={() => handleCurrentDropdownState(undefined)}
                 >
                   {watch("parent_id") ? (
                     <>

web/components/issues/select/label.tsx

@@ -4,19 +4,20 @@ import { useRouter } from "next/router";
 import { usePopper } from "react-popper";
 import { Check, Component, Plus, Search, Tag } from "lucide-react";
 import { Combobox } from "@headlessui/react";
-// hooks
+// components
 import { IssueLabelsList } from "@/components/ui";
+// hooks
 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
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   value: string[];
   onChange: (value: string[]) => void;
+  isDropdownOpened?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
   projectId: string;
   label?: JSX.Element;
   disabled?: boolean;
@@ -24,7 +25,18 @@ type Props = {
 };
 
 export const IssueLabelSelect: React.FC<Props> = observer((props) => {
-  const { setIsOpen, value, onChange, projectId, label, disabled = false, tabIndex } = props;
+  const {
+    setIsOpen,
+    value,
+    onChange,
+    isDropdownOpened,
+    onOpen: onDropdownOpen,
+    onClose,
+    projectId,
+    label,
+    disabled = false,
+    tabIndex,
+  } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -60,7 +72,11 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
   };
 
   const toggleDropdown = () => {
-    if (!isDropdownOpen) onOpen();
+    if (!isDropdownOpen) {
+      onOpen();
+      onDropdownOpen && onDropdownOpen();
+    }
+    if (isDropdownOpen) onClose && onClose();
     setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
   };
 
@@ -77,7 +93,6 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
-  useOutsideKeydownDetector(dropdownRef, handleClose);
 
   useEffect(() => {
     if (isDropdownOpen && inputRef.current) {
@@ -85,6 +100,13 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
     }
   }, [isDropdownOpen]);
 
+  useEffect(() => {
+    if (isDropdownOpened && !isDropdownOpen) setIsDropdownOpen(true);
+  }, [isDropdownOpened, isDropdownOpen]);
+  useEffect(() => {
+    if (isDropdownOpened === false) setIsDropdownOpen(false);
+  }, [isDropdownOpened]);
+
   return (
     <Combobox
       as="div"

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

@@ -1,19 +0,0 @@
-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;