[WEB-1262] refactor: custom hook for common dropdown logic (#4420)

* refactor: custom hook for common dropdown logic

* chore: clear query for label dropdowns

web/components/dropdowns/cycle/index.tsx

@@ -8,8 +8,7 @@ import { ContrastIcon } from "@plane/ui";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useCycle } from "@/hooks/store";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { useDropdown } from "@/hooks/use-dropdown";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // local components and constants
 import { DropdownButton } from "../buttons";
 import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
@@ -57,32 +56,18 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
 
   const selectedName = value ? getCycleNameById(value) : null;
 
-  const handleClose = () => {
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
-    if (!isOpen) return;
+    dropdownRef,
-    setIsOpen(false);
+    isOpen,
-    onClose && onClose();
+    onClose,
-  };
+    setIsOpen,
-
+  });
-  const toggleDropdown = () => {
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-    if (isOpen) onClose && onClose();
-  };
 
   const dropdownOnChange = (val: string | null) => {
     onChange(val);
     handleClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
   return (
     <Combobox
       as="div"

web/components/dropdowns/date-range.tsx

@@ -4,15 +4,14 @@ import { DateRange, DayPicker, Matcher } from "react-day-picker";
 import { usePopper } from "react-popper";
 import { ArrowRight, CalendarDays } from "lucide-react";
 import { Combobox } from "@headlessui/react";
-// hooks
-// components
 // ui
 import { Button } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+// hooks
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { useDropdown } from "@/hooks/use-dropdown";
+// components
 import { DropdownButton } from "./buttons";
 // types
 import { TButtonVariants } from "./types";
@@ -105,6 +104,13 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
     if (referenceElement) referenceElement.focus();
   };
 
+  const { handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onOpen,
+    setIsOpen,
+  });
+
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
@@ -115,21 +121,6 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
     if (referenceElement) referenceElement.blur();
   };
 
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
   const disabledDays: Matcher[] = [];
   if (minDate) disabledDays.push({ before: minDate });
   if (maxDate) disabledDays.push({ after: maxDate });

web/components/dropdowns/date.tsx

@@ -7,14 +7,13 @@ import { Combobox } from "@headlessui/react";
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate, getDate } from "@/helpers/date-time.helper";
 // hooks
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { useDropdown } from "@/hooks/use-dropdown";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
-// types
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
-import { TDropdownProps } from "./types";
 // constants
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
+// types
+import { TDropdownProps } from "./types";
 
 type Props = TDropdownProps & {
   clearIconClassName?: string;
@@ -76,34 +75,22 @@ export const DateDropdown: React.FC<Props> = (props) => {
     if (referenceElement) referenceElement.focus();
   };
 
-  const handleClose = () => {
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
-    if (!isOpen) return;
+    dropdownRef,
-    setIsOpen(false);
+    isOpen,
-    if (referenceElement) referenceElement.blur();
+    onClose,
-    onClose && onClose();
+    onOpen,
-  };
+    setIsOpen,
-
+  });
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-    if (isOpen) onClose && onClose();
-  };
 
   const dropdownOnChange = (val: Date | null) => {
     onChange(val);
-    if (closeOnSelect) handleClose();
+    if (closeOnSelect) {
+      handleClose();
+      referenceElement?.blur();
+    }
   };
 
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
   const disabledDays: Matcher[] = [];
   if (minDate) disabledDays.push({ before: minDate });
   if (maxDate) disabledDays.push({ after: maxDate });

web/components/dropdowns/estimate.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
@@ -8,8 +8,7 @@ import { Combobox } from "@headlessui/react";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppRouter, useEstimate } from "@/hooks/store";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { useDropdown } from "@/hooks/use-dropdown";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
 import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
@@ -106,50 +105,26 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
 
   const selectedEstimate = value !== null ? getEstimatePointValue(value, projectId) : null;
 
-  const onOpen = () => {
+  const onOpen = async () => {
-    if (!activeEstimate && workspaceSlug) fetchProjectEstimates(workspaceSlug, projectId);
+    if (!activeEstimate && workspaceSlug) await fetchProjectEstimates(workspaceSlug, projectId);
   };
 
-  const handleClose = () => {
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
-    if (!isOpen) return;
+    dropdownRef,
-    setIsOpen(false);
+    inputRef,
-    onClose && onClose();
+    isOpen,
-  };
+    onClose,
-
+    onOpen,
-  const toggleDropdown = () => {
+    query,
-    if (!isOpen) onOpen();
+    setIsOpen,
-    setIsOpen((prevIsOpen) => !prevIsOpen);
+    setQuery,
-    if (isOpen) onClose && onClose();
+  });
-  };
 
   const dropdownOnChange = (val: number | null) => {
     onChange(val);
     handleClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (query !== "" && e.key === "Escape") {
-      e.stopPropagation();
-      setQuery("");
-    }
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"

web/components/dropdowns/member/index.tsx

@@ -7,8 +7,7 @@ import { Combobox } from "@headlessui/react";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMember } from "@/hooks/store";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { useDropdown } from "@/hooks/use-dropdown";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "../buttons";
 import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
@@ -62,32 +61,18 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
   };
   if (multiple) comboboxProps.multiple = true;
 
-  const handleClose = () => {
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
-    if (!isOpen) return;
+    dropdownRef,
-    setIsOpen(false);
+    isOpen,
-    onClose && onClose();
+    onClose,
-  };
+    setIsOpen,
-
+  });
-  const toggleDropdown = () => {
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-    if (isOpen) onClose && onClose();
-  };
 
   const dropdownOnChange = (val: string & string[]) => {
     onChange(val);
     if (!multiple) handleClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
   return (
     <Combobox
       as="div"

web/components/dropdowns/module/index.tsx

@@ -2,19 +2,18 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronDown, X } from "lucide-react";
 import { Combobox } from "@headlessui/react";
-// hooks
+// ui
 import { DiceIcon, Tooltip } from "@plane/ui";
+// helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
 import { useModule } from "@/hooks/store";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { useDropdown } from "@/hooks/use-dropdown";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import { DropdownButton } from "../buttons";
-// icons
-// helpers
-// types
 import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
+// types
 import { TDropdownProps } from "../types";
 // constants
 import { ModuleOptions } from "./module-options";
@@ -178,32 +177,19 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
 
   const { getModuleNameById } = useModule();
 
-  const handleClose = () => {
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
-    if (!isOpen) return;
+    dropdownRef,
-    setIsOpen(false);
+    inputRef,
-    onClose && onClose();
+    isOpen,
-  };
+    onClose,
-
+    setIsOpen,
-  const toggleDropdown = () => {
+  });
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-    if (isOpen) onClose && onClose();
-  };
 
   const dropdownOnChange = (val: string & string[]) => {
     onChange(val);
     if (!multiple) handleClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
   const comboboxProps: any = {
     value,
     onChange: dropdownOnChange,

web/components/dropdowns/priority.tsx

@@ -1,22 +1,23 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import { useTheme } from "next-themes";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
-import { TIssuePriorities } from "@plane/types";
-// hooks
-import { PriorityIcon, Tooltip } from "@plane/ui";
-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 { usePlatformOS } from "@/hooks/use-platform-os";
-// icons
-// helpers
 // types
-import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
+import { TIssuePriorities } from "@plane/types";
-import { TDropdownProps } from "./types";
+// ui
+import { PriorityIcon, Tooltip } from "@plane/ui";
 // constants
+import { ISSUE_PRIORITIES } from "@/constants/issue";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// constants
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
+// types
+import { TDropdownProps } from "./types";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -328,38 +329,20 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   const filteredOptions =
     query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
-  const handleClose = () => {
-    if (!isOpen) return;
-    setIsOpen(false);
-    onClose && onClose();
-  };
-
-  const toggleDropdown = () => {
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-    if (isOpen) onClose && onClose();
-  };
-
   const dropdownOnChange = (val: TIssuePriorities) => {
     onChange(val);
     handleClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
-
+    dropdownRef,
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    inputRef,
-    e.stopPropagation();
+    isOpen,
-    e.preventDefault();
+    onClose,
-    toggleDropdown();
+    query,
-  };
+    setIsOpen,
-
+    setQuery,
-  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  });
-    if (query !== "" && e.key === "Escape") {
-      e.stopPropagation();
-      setQuery("");
-    }
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
 
   const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
     ? BorderButton
@@ -367,12 +350,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       ? BackgroundButton
       : TransparentButton;
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"

web/components/dropdowns/project.tsx

@@ -1,22 +1,23 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+// types
 import { IProject } from "@plane/types";
-// hooks
+// components
 import { ProjectLogo } from "@/components/project";
+// helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
 import { useProject } from "@/hooks/store";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { useDropdown } from "@/hooks/use-dropdown";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
-// helpers
-// types
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
-import { TDropdownProps } from "./types";
 // constants
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
+// types
+import { TDropdownProps } from "./types";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -96,37 +97,21 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
 
   const selectedProject = value ? getProjectById(value) : null;
 
-  const handleClose = () => {
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
-    if (!isOpen) return;
+    dropdownRef,
-    setIsOpen(false);
+    inputRef,
-    onClose && onClose();
+    isOpen,
-  };
+    onClose,
-
+    query,
-  const toggleDropdown = () => {
+    setIsOpen,
-    setIsOpen((prevIsOpen) => !prevIsOpen);
+    setQuery,
-  };
+  });
 
   const dropdownOnChange = (val: string) => {
     onChange(val);
     handleClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -203,6 +188,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
                 displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
               />
             </div>
             <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">

web/components/dropdowns/state.tsx

@@ -3,20 +3,19 @@ import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
-// hooks
+// ui
 import { Spinner, StateGroupIcon } from "@plane/ui";
+// helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
 import { useAppRouter, useProjectState } from "@/hooks/store";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { useDropdown } from "@/hooks/use-dropdown";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
-// icons
-// helpers
-// types
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
-import { TDropdownProps } from "./types";
 // constants
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
+// types
+import { TDropdownProps } from "./types";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -99,51 +98,28 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
       setStateLoader(false);
     }
   };
+
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    onOpen,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
   useEffect(() => {
     if (projectId) onOpen();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]);
 
-  const handleClose = () => {
-    if (!isOpen) return;
-    setIsOpen(false);
-    onClose && onClose();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-    if (isOpen) onClose && onClose();
-  };
-
   const dropdownOnChange = (val: string) => {
     onChange(val);
     handleClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (query !== "" && e.key === "Escape") {
-      e.stopPropagation();
-      setQuery("");
-    }
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"

web/components/issues/issue-layouts/properties/labels.tsx

@@ -72,6 +72,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
+    setQuery("");
     onClose && onClose();
   };
 

web/components/issues/select/label.tsx

@@ -57,6 +57,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
   const handleClose = () => {
     if (isDropdownOpen) setIsDropdownOpen(false);
     if (referenceElement) referenceElement.blur();
+    setQuery("");
   };
 
   const toggleDropdown = () => {

web/hooks/use-dropdown.ts

@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+// hooks
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+
+type TArguments = {
+  dropdownRef: React.RefObject<HTMLDivElement>;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
+  isOpen: boolean;
+  onClose?: () => void;
+  onOpen?: () => Promise<void> | void;
+  query?: string;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setQuery?: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export const useDropdown = (args: TArguments) => {
+  const { dropdownRef, inputRef, isOpen, onClose, onOpen, query, setIsOpen, setQuery } = args;
+
+  /**
+   * @description clear the search input when the user presses the escape key, if the search input is not empty
+   * @param {React.KeyboardEvent<HTMLInputElement>} e
+   */
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery?.("");
+    }
+  };
+
+  /**
+   * @description close the dropdown, clear the search input, and call the onClose callback
+   */
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose?.();
+    setQuery?.("");
+  };
+
+  // toggle the dropdown, call the onOpen callback if the dropdown is closed, and call the onClose callback if the dropdown is open
+  const toggleDropdown = () => {
+    if (!isOpen) onOpen?.();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose?.();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  /**
+   * @description toggle the dropdown on click
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} e
+   */
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  // close the dropdown when the user clicks outside of the dropdown
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  // focus the search input when the dropdown is open
+  useEffect(() => {
+    if (isOpen && inputRef?.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef, isOpen]);
+
+  return {
+    handleClose,
+    handleKeyDown,
+    handleOnClick,
+    searchInputKeyDown,
+  };
+};