chore: drop-downs improvements and bug fixes (#3433)

* chore: dropdowns should close on selecting an option

* style: @plane/ui dropdown styling

* refactor: @plane/ui dropdowns

* fix: build errors

* fix: list layout dropdowns positioning

* fix: priority dropdown text in dark mode

packages/ui/src/dropdowns/custom-menu.tsx

@@ -1,17 +1,15 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
-// react-popper
+import { Menu } from "@headlessui/react";
 import { usePopper } from "react-popper";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
+// helpers
-import { Menu } from "@headlessui/react";
-// type
-import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
-// icons
-import { ChevronDown, MoreHorizontal } from "lucide-react";
 import { cn } from "../../helpers";
+// types
+import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
 
 const CustomMenu = (props: ICustomMenuDropdownProps) => {
   const {
@@ -29,7 +27,6 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     noChevron = false,
     optionsClassName = "",
     verticalEllipsis = false,
-    width = "auto",
     portalElement,
     menuButtonOnClick,
     tabIndex,
@@ -63,17 +60,16 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       static
     >
       <div
-        className={`my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${
+        className={cn(
-          maxHeight === "lg"
+          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
-            ? "max-h-60"
+          {
-            : maxHeight === "md"
+            "max-h-60": maxHeight === "lg",
-              ? "max-h-48"
+            "max-h-48": maxHeight === "md",
-              : maxHeight === "rg"
+            "max-h-36": maxHeight === "rg",
-                ? "max-h-36"
+            "max-h-28": maxHeight === "sm",
-                : maxHeight === "sm"
+          },
-                  ? "max-h-28"
+          optionsClassName
-                  : ""
+        )}
-        } ${width === "auto" ? "min-w-[12rem] whitespace-nowrap" : width} ${optionsClassName}`}
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
@@ -92,7 +88,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={`relative w-min text-left ${className}`}
+      className={cn("relative w-min text-left", className)}
       onKeyDown={handleKeyDown}
     >
       {({ open }) => (

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -1,14 +1,12 @@
 import React, { useRef, useState } from "react";
-
-// react-popper
 import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
+// helpers
-import { Combobox } from "@headlessui/react";
+import { cn } from "../../helpers";
-// icons
-import { Check, ChevronDown, Search } from "lucide-react";
 // types
 import { ICustomSearchSelectProps } from "./helper";
 
@@ -31,7 +29,6 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
     onOpen,
     optionsClassName = "",
     value,
-    width = "auto",
     tabIndex,
   } = props;
   const [query, setQuery] = useState("");
@@ -70,7 +67,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={`relative flex-shrink-0 text-left ${className}`}
+      className={cn("relative flex-shrink-0 text-left", className)}
       onKeyDown={handleKeyDown}
       {...comboboxProps}
     >
@@ -114,37 +111,33 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
               </Combobox.Button>
             )}
             {isOpen && (
-              <Combobox.Options as={React.Fragment} static>
+              <Combobox.Options className="fixed z-10" static>
                 <div
-                  className={`z-10 my-1 min-w-[10rem] rounded-md border border-custom-border-300 bg-custom-background-90 p-2 text-xs shadow-custom-shadow-rg focus:outline-none ${
+                  className={cn(
-                    width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap",
-                  } ${optionsClassName}`}
+                    optionsClassName
+                  )}
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
                 >
-                  <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-                    <Search className="h-3 w-3 text-custom-text-200" />
+                    <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
                     <Combobox.Input
-                      className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                      className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                       value={query}
                       onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Type to search..."
+                      placeholder="Search"
                       displayValue={(assigned: any) => assigned?.name}
                     />
                   </div>
                   <div
-                    className={`mt-2 space-y-1 ${
+                    className={cn("mt-2 space-y-1 overflow-y-scroll", {
-                      maxHeight === "lg"
+                      "max-h-60": maxHeight === "lg",
-                        ? "max-h-60"
+                      "max-h-48": maxHeight === "md",
-                        : maxHeight === "md"
+                      "max-h-36": maxHeight === "rg",
-                          ? "max-h-48"
+                      "max-h-28": maxHeight === "sm",
-                          : maxHeight === "rg"
+                    })}
-                            ? "max-h-36"
-                            : maxHeight === "sm"
-                              ? "max-h-28"
-                              : ""
-                    } overflow-y-scroll`}
                   >
                     {filteredOptions ? (
                       filteredOptions.length > 0 ? (
@@ -152,37 +145,31 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                           <Combobox.Option
                             key={option.value}
                             value={option.value}
-                            className={({ active, selected }) =>
+                            className={({ active }) =>
-                              `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
+                              cn(
-                                active || selected ? "bg-custom-background-80" : ""
+                                "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
-                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                                {
+                                  "bg-custom-background-80": active,
+                                }
+                              )
                             }
+                            onClick={() => {
+                              if (!multiple) closeDropdown();
+                            }}
                           >
-                            {({ active, selected }) => (
+                            {({ selected }) => (
                               <>
-                                {option.content}
+                                <span className="flex-grow truncate">{option.content}</span>
-                                {multiple ? (
+                                {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                                  <div
-                                    className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
-                                      active || selected ? "opacity-100" : "opacity-0"
-                                    }`}
-                                  >
-                                    <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                  </div>
-                                ) : (
-                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                )}
                               </>
                             )}
                           </Combobox.Option>
                         ))
                       ) : (
-                        <span className="flex items-center gap-2 p-1">
+                        <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
-                          <p className="text-left text-custom-text-200 ">No matching results</p>
-                        </span>
                       )
                     ) : (
-                      <p className="text-center text-custom-text-200">Loading...</p>
+                      <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
                     )}
                   </div>
                   {footerOption}

packages/ui/src/dropdowns/custom-select.tsx

@@ -1,14 +1,12 @@
 import React, { useRef, useState } from "react";
-
-// react-popper
 import { usePopper } from "react-popper";
+import { Listbox } from "@headlessui/react";
+import { Check, ChevronDown } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
+// helpers
-import { Listbox } from "@headlessui/react";
+import { cn } from "../../helpers";
-// icons
-import { Check, ChevronDown } from "lucide-react";
 // types
 import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
 
@@ -28,7 +26,6 @@ const CustomSelect = (props: ICustomSelectProps) => {
     onChange,
     optionsClassName = "",
     value,
-    width = "auto",
     tabIndex,
   } = props;
   // states
@@ -57,7 +54,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
       tabIndex={tabIndex}
       value={value}
       onChange={onChange}
-      className={`relative flex-shrink-0 text-left ${className}`}
+      className={cn("relative flex-shrink-0 text-left", className)}
       onKeyDown={handleKeyDown}
       disabled={disabled}
     >
@@ -94,24 +91,23 @@ const CustomSelect = (props: ICustomSelectProps) => {
         )}
       </>
       {isOpen && (
-        <Listbox.Options static>
+        <Listbox.Options className="fixed z-10" onClick={() => closeDropdown()} static>
           <div
-            className={`z-10 my-1 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none ${
+            className={cn(
-              maxHeight === "lg"
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
-                ? "max-h-60"
+              {
-                : maxHeight === "md"
+                "max-h-60": maxHeight === "lg",
-                  ? "max-h-48"
+                "max-h-48": maxHeight === "md",
-                  : maxHeight === "rg"
+                "max-h-36": maxHeight === "rg",
-                    ? "max-h-36"
+                "max-h-28": maxHeight === "sm",
-                    : maxHeight === "sm"
+              },
-                      ? "max-h-28"
+              optionsClassName
-                      : ""
+            )}
-            } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="space-y-1 p-2">{children}</div>
+            {children}
           </div>
         </Listbox.Options>
       )}
@@ -124,16 +120,20 @@ const Option = (props: ICustomSelectItemProps) => {
   return (
     <Listbox.Option
       value={value}
-      className={({ active, selected }) =>
+      className={({ active }) =>
-        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+        cn(
-          active || selected ? "bg-custom-background-80" : ""
+          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
-        } ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}`
+          {
+            "bg-custom-background-80": active,
+          },
+          className
+        )
       }
     >
       {({ selected }) => (
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2">{children}</div>
-          {selected && <Check className="h-4 w-4 flex-shrink-0" />}
+          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
         </div>
       )}
     </Listbox.Option>

packages/ui/src/dropdowns/helper.tsx

@@ -13,7 +13,6 @@ export interface IDropdownProps {
   noChevron?: boolean;
   onOpen?: () => void;
   optionsClassName?: string;
-  width?: "auto" | string;
   placement?: Placement;
   tabIndex?: number;
 }

web/components/analytics/custom-analytics/select/project.tsx

@@ -21,9 +21,9 @@ export const SelectProject: React.FC<Props> = observer((props) => {
       value: projectDetails?.id,
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 truncate">
-          <span className="text-[0.65rem] text-custom-text-200">{projectDetails?.identifier}</span>
+          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
-          {projectDetails?.name}
+          <span className="flex-grow truncate">{projectDetails?.name}</span>
         </div>
       ),
     };
@@ -42,7 +42,6 @@ export const SelectProject: React.FC<Props> = observer((props) => {
               .join(", ")
           : "All projects"
       }
-      optionsClassName="min-w-full max-w-[20rem]"
       multiple
     />
   );

web/components/analytics/custom-analytics/select/segment.tsx

@@ -28,7 +28,6 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
         </span>
       }
       onChange={onChange}
-      width="w-full"
       maxHeight="lg"
     >
       <CustomSelect.Option value={null}>No value</CustomSelect.Option>

web/components/analytics/custom-analytics/select/x-axis.tsx

@@ -24,7 +24,6 @@ export const SelectXAxis: React.FC<Props> = (props) => {
       value={value}
       label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
       onChange={onChange}
-      width="w-full"
       maxHeight="lg"
     >
       {ANALYTICS_X_AXIS_VALUES.map((item) => {

web/components/analytics/custom-analytics/select/y-axis.tsx

@@ -15,7 +15,7 @@ export const SelectYAxis: React.FC<Props> = ({ value, onChange }) => (
     value={value}
     label={<span>{ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === value)?.label ?? "None"}</span>}
     onChange={onChange}
-    width="w-full"
+    maxHeight="lg"
   >
     {ANALYTICS_Y_AXIS_VALUES.map((item) => (
       <CustomSelect.Option key={item.value} value={item.value}>

web/components/automation/auto-archive-automation.tsx

@@ -79,7 +79,6 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                       handleChange({ archive_in: val });
                     }}
                     input
-                    width="w-full"
                     disabled={!isAdmin}
                   >
                     <>

web/components/automation/auto-close-automation.tsx

@@ -106,7 +106,6 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                         handleChange({ close_in: val });
                       }}
                       input
-                      width="w-full"
                       disabled={!isAdmin}
                     >
                       <>
@@ -161,7 +160,6 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                       }}
                       options={options}
                       disabled={!multipleOptions}
-                      width="w-full"
                       input
                     />
                   </div>

web/components/core/activity.tsx

@@ -43,7 +43,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
         }`}
         target={activity.issue === null ? "_self" : "_blank"}
         rel={activity.issue === null ? "" : "noopener noreferrer"}
-        className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+        className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline whitespace-nowrap"
       >
         {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}{" "}
         <span className="font-normal">{activity.issue_detail?.name}</span>
@@ -123,7 +123,6 @@ const activityDetails: {
                 to <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
       else
@@ -136,7 +135,6 @@ const activityDetails: {
                 from <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
     },
@@ -181,7 +179,6 @@ const activityDetails: {
                 from <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
     },
@@ -197,7 +194,6 @@ const activityDetails: {
             of <IssueLink activity={activity} />
           </>
         )}
-        .
       </>
     ),
     icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
@@ -214,7 +210,6 @@ const activityDetails: {
                 from <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
       else
@@ -227,7 +222,6 @@ const activityDetails: {
                 for <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
     },
@@ -297,7 +291,6 @@ const activityDetails: {
                 to <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
       else if (activity.verb === "updated")
@@ -318,7 +311,6 @@ const activityDetails: {
                 from <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
       else
@@ -339,7 +331,6 @@ const activityDetails: {
                 from <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
     },
@@ -449,7 +440,6 @@ const activityDetails: {
             of <IssueLink activity={activity} />
           </>
         )}
-        .
       </>
     ),
     icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
@@ -466,7 +456,6 @@ const activityDetails: {
                 from <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
       else
@@ -479,7 +468,6 @@ const activityDetails: {
                 for <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
     },
@@ -498,7 +486,6 @@ const activityDetails: {
             for <IssueLink activity={activity} />
           </>
         )}
-        .
       </>
     ),
     icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
@@ -587,7 +574,6 @@ const activityDetails: {
             for <IssueLink activity={activity} />
           </>
         )}
-        .
       </>
     ),
     icon: <LayoutGridIcon size={12} color="#6b7280" aria-hidden="true" />,
@@ -604,7 +590,6 @@ const activityDetails: {
                 from <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
       else
@@ -618,7 +603,6 @@ const activityDetails: {
                 for <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
     },
@@ -636,7 +620,6 @@ const activityDetails: {
                 from <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
       else
@@ -650,7 +633,6 @@ const activityDetails: {
                 for <IssueLink activity={activity} />
               </>
             )}
-            .
           </>
         );
     },

web/components/core/theme/theme-switch.tsx

@@ -46,7 +46,6 @@ export const ThemeSwitch: FC<Props> = (props) => {
       }
       onChange={onChange}
       input
-      width="w-full z-20"
     >
       {THEME_OPTIONS.map((themeOption) => (
         <CustomSelect.Option key={themeOption.value} value={themeOption}>

web/components/cycles/cycles-board-card.tsx

@@ -246,7 +246,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                       <Star className="h-3.5 w-3.5 text-custom-text-200" />
                     </button>
                   ))}
-                <CustomMenu width="auto" ellipsis className="z-10">
+                <CustomMenu ellipsis className="z-10">
                   {!isCompleted && isEditingAllowed && (
                     <>
                       <CustomMenu.MenuItem onClick={handleEditCycle}>

web/components/cycles/cycles-list-item.tsx

@@ -240,7 +240,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 </button>
               ))}
 
-            <CustomMenu width="auto" ellipsis>
+            <CustomMenu ellipsis>
               {!isCompleted && isEditingAllowed && (
                 <>
                   <CustomMenu.MenuItem onClick={handleEditCycle}>

web/components/cycles/sidebar.tsx

@@ -341,7 +341,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
               <LinkIcon className="h-3 w-3 text-custom-text-300" />
             </button>
             {!isCompleted && isEditingAllowed && (
-              <CustomMenu width="lg" placement="bottom-end" ellipsis>
+              <CustomMenu placement="bottom-end" ellipsis>
                 <CustomMenu.MenuItem
                   onClick={() => {
                     setTrackElement("CYCLE_PAGE_SIDEBAR");

web/components/dropdowns/cycle.tsx

@@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useApplication, useCycle } from "hooks/store";
@@ -14,21 +13,14 @@ import { ContrastIcon } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { ICycle } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";
 
-type Props = {
+type Props = TDropdownProps & {
   button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
   dropdownArrow?: boolean;
   onChange: (val: string | null) => void;
-  placement?: Placement;
   projectId: string;
   value: string | null;
-  tabIndex?: number;
 };
 
 type ButtonProps = {
@@ -291,6 +283,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/date.tsx

@@ -3,7 +3,6 @@ import { Popover } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
-// import "react-datepicker/dist/react-datepicker.css";
 // hooks
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -11,24 +10,17 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { renderFormattedDate } from "helpers/date-time.helper";
 import { cn } from "helpers/common.helper";
 // types
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";
-import { Placement } from "@popperjs/core";
 
-type Props = {
+type Props = TDropdownProps & {
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  disabled?: boolean;
   icon?: React.ReactNode;
   isClearable?: boolean;
   minDate?: Date;
   maxDate?: Date;
   onChange: (val: Date | null) => void;
   placeholder: string;
-  placement?: Placement;
   value: Date | string | null;
   closeOnSelect?: boolean;
-  tabIndex?: number;
 };
 
 type ButtonProps = {
@@ -118,6 +110,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
     buttonClassName = "",
     buttonContainerClassName,
     buttonVariant,
+    className = "",
     disabled = false,
     icon = <CalendarDays className="h-3 w-3 flex-shrink-0" />,
     isClearable = true,
@@ -160,102 +153,103 @@ export const DateDropdown: React.FC<Props> = (props) => {
   useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
-    <Popover ref={dropdownRef} tabIndex={tabIndex} className="h-full flex-shrink-0" onKeyDown={handleKeyDown}>
+    <Popover
-      {({ close }) => (
+      ref={dropdownRef}
-        <>
+      tabIndex={tabIndex}
-          <Popover.Button as={React.Fragment}>
+      className={cn("h-full flex-shrink-0", className)}
-            <button
+      onKeyDown={handleKeyDown}
-              ref={setReferenceElement}
+    >
-              type="button"
+      <Popover.Button as={React.Fragment}>
-              className={cn(
+        <button
-                "block h-full max-w-full outline-none",
+          ref={setReferenceElement}
-                {
+          type="button"
-                  "cursor-not-allowed text-custom-text-200": disabled,
+          className={cn(
-                  "cursor-pointer": !disabled,
+            "block h-full max-w-full outline-none",
-                },
+            {
-                buttonContainerClassName
+              "cursor-not-allowed text-custom-text-200": disabled,
-              )}
+              "cursor-pointer": !disabled,
-              onClick={openDropdown}
+            },
-            >
+            buttonContainerClassName
-              {buttonVariant === "border-with-text" ? (
-                <BorderButton
-                  date={value}
-                  className={buttonClassName}
-                  icon={icon}
-                  placeholder={placeholder}
-                  isClearable={isClearable && isDateSelected}
-                  onClear={() => onChange(null)}
-                />
-              ) : buttonVariant === "border-without-text" ? (
-                <BorderButton
-                  date={value}
-                  className={buttonClassName}
-                  icon={icon}
-                  placeholder={placeholder}
-                  isClearable={isClearable && isDateSelected}
-                  onClear={() => onChange(null)}
-                  hideText
-                />
-              ) : buttonVariant === "background-with-text" ? (
-                <BackgroundButton
-                  date={value}
-                  className={buttonClassName}
-                  icon={icon}
-                  placeholder={placeholder}
-                  isClearable={isClearable && isDateSelected}
-                  onClear={() => onChange(null)}
-                />
-              ) : buttonVariant === "background-without-text" ? (
-                <BackgroundButton
-                  date={value}
-                  className={buttonClassName}
-                  icon={icon}
-                  placeholder={placeholder}
-                  isClearable={isClearable && isDateSelected}
-                  onClear={() => onChange(null)}
-                  hideText
-                />
-              ) : buttonVariant === "transparent-with-text" ? (
-                <TransparentButton
-                  date={value}
-                  className={buttonClassName}
-                  icon={icon}
-                  placeholder={placeholder}
-                  isClearable={isClearable && isDateSelected}
-                  onClear={() => onChange(null)}
-                />
-              ) : buttonVariant === "transparent-without-text" ? (
-                <TransparentButton
-                  date={value}
-                  className={buttonClassName}
-                  icon={icon}
-                  placeholder={placeholder}
-                  isClearable={isClearable && isDateSelected}
-                  onClear={() => onChange(null)}
-                  hideText
-                />
-              ) : null}
-            </button>
-          </Popover.Button>
-          {isOpen && (
-            <Popover.Panel className="fixed z-10" static>
-              <div className="my-1" ref={setPopperElement} style={styles.popper} {...attributes.popper}>
-                <DatePicker
-                  selected={value ? new Date(value) : null}
-                  onChange={(val) => {
-                    onChange(val);
-                    if (closeOnSelect) close();
-                  }}
-                  dateFormat="dd-MM-yyyy"
-                  minDate={minDate}
-                  maxDate={maxDate}
-                  calendarClassName="shadow-custom-shadow-rg rounded"
-                  inline
-                />
-              </div>
-            </Popover.Panel>
           )}
-        </>
+          onClick={openDropdown}
+        >
+          {buttonVariant === "border-with-text" ? (
+            <BorderButton
+              date={value}
+              className={buttonClassName}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+            />
+          ) : buttonVariant === "border-without-text" ? (
+            <BorderButton
+              date={value}
+              className={buttonClassName}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              hideText
+            />
+          ) : buttonVariant === "background-with-text" ? (
+            <BackgroundButton
+              date={value}
+              className={buttonClassName}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+            />
+          ) : buttonVariant === "background-without-text" ? (
+            <BackgroundButton
+              date={value}
+              className={buttonClassName}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              hideText
+            />
+          ) : buttonVariant === "transparent-with-text" ? (
+            <TransparentButton
+              date={value}
+              className={buttonClassName}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+            />
+          ) : buttonVariant === "transparent-without-text" ? (
+            <TransparentButton
+              date={value}
+              className={buttonClassName}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              hideText
+            />
+          ) : null}
+        </button>
+      </Popover.Button>
+      {isOpen && (
+        <Popover.Panel className="fixed z-10" static>
+          <div className="my-1" ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+            <DatePicker
+              selected={value ? new Date(value) : null}
+              onChange={(val) => {
+                onChange(val);
+                if (closeOnSelect) closeDropdown();
+              }}
+              dateFormat="dd-MM-yyyy"
+              minDate={minDate}
+              maxDate={maxDate}
+              calendarClassName="shadow-custom-shadow-rg rounded"
+              inline
+            />
+          </div>
+        </Popover.Panel>
       )}
     </Popover>
   );

web/components/dropdowns/estimate.tsx

@@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search, Triangle } from "lucide-react";
 import sortBy from "lodash/sortBy";
 // hooks
@@ -12,21 +11,14 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";
 
-type Props = {
+type Props = TDropdownProps & {
   button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
   dropdownArrow?: boolean;
   onChange: (val: number | null) => void;
-  placement?: Placement;
   projectId: string;
   value: number | null;
-  tabIndex?: number;
 };
 
 type ButtonProps = {
@@ -280,6 +272,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/member/project-member.tsx

@@ -217,6 +217,9 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={() => {
+                        if (!multiple) closeDropdown();
+                      }}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/member/types.d.ts

@@ -1,26 +1,18 @@
-import { Placement } from "@popperjs/core";
+import { TDropdownProps } from "../types";
-import { TButtonVariants } from "../types";
 
-export type MemberDropdownProps = {
+export type MemberDropdownProps = TDropdownProps & {
   button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
   dropdownArrow?: boolean;
   placeholder?: string;
-  placement?: Placement;
-  tabIndex?: number;
 } & (
-  | {
+    | {
-      multiple: false;
+        multiple: false;
-      onChange: (val: string | null) => void;
+        onChange: (val: string | null) => void;
-      value: string | null;
+        value: string | null;
-    }
+      }
-  | {
+    | {
-      multiple: true;
+        multiple: true;
-      onChange: (val: string[]) => void;
+        onChange: (val: string[]) => void;
-      value: string[];
+        value: string[];
-    }
+      }
-);
+  );

web/components/dropdowns/member/workspace-member.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -13,6 +13,8 @@ import { Avatar } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { MemberDropdownProps } from "./types";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((props) => {
   const {
@@ -28,9 +30,13 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
     placeholder = "Members",
     placement,
     value,
+    tabIndex,
   } = props;
   // states
   const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -78,13 +84,24 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
   };
   if (multiple) comboboxProps.multiple = true;
 
+  const openDropdown = () => {
+    setIsOpen(true);
+    if (referenceElement) referenceElement.focus();
+  };
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
+
   return (
     <Combobox
       as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
       className={cn("h-full flex-shrink-0", {
         className,
       })}
       {...comboboxProps}
+      handleKeyDown={handleKeyDown}
     >
       <Combobox.Button as={Fragment}>
         {button ? (
@@ -186,6 +203,9 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                         active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
+                    onClick={() => {
+                      if (!multiple) closeDropdown();
+                    }}
                   >
                     {({ selected }) => (
                       <>

web/components/dropdowns/module.tsx

@@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useApplication, useModule } from "hooks/store";
@@ -14,21 +13,14 @@ import { DiceIcon } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { IModule } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";
 
-type Props = {
+type Props = TDropdownProps & {
   button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
   dropdownArrow?: boolean;
   onChange: (val: string | null) => void;
-  placement?: Placement;
   projectId: string;
   value: string | null;
-  tabIndex?: number;
 };
 
 type DropdownOptions =
@@ -186,9 +178,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
+      className={cn("h-full flex-shrink-0", className)}
-        className,
-      })}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -291,6 +281,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/priority.tsx

@@ -1,7 +1,6 @@
 import { Fragment, ReactNode, useRef, useState } from "react";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
@@ -12,23 +11,17 @@ import { PriorityIcon } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { TIssuePriorities } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";
 // constants
 import { ISSUE_PRIORITIES } from "constants/issue";
+import { useTheme } from "next-themes";
 
-type Props = {
+type Props = TDropdownProps & {
   button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
   dropdownArrow?: boolean;
   highlightUrgent?: boolean;
   onChange: (val: TIssuePriorities) => void;
-  placement?: Placement;
   value: TIssuePriorities;
-  tabIndex?: number;
 };
 
 type ButtonProps = {
@@ -236,43 +229,20 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       },
     ],
   });
+  // next-themes
+  // TODO: remove this after new theming implementation
+  const { resolvedTheme } = useTheme();
 
-  const options = ISSUE_PRIORITIES.map((priority) => {
+  const options = ISSUE_PRIORITIES.map((priority) => ({
-    const priorityClasses = {
+    value: priority.key,
-      urgent: "bg-red-500/20 text-red-950 border-red-500",
+    query: priority.key,
-      high: "bg-orange-500/20 text-orange-950 border-orange-500",
+    content: (
-      medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
+      <div className="flex items-center gap-2">
-      low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
+        <PriorityIcon priority={priority.key} size={14} withContainer />
-      none: "bg-custom-background-80 border-custom-border-300",
+        <span className="flex-grow truncate">{priority.title}</span>
-    };
+      </div>
-
+    ),
-    return {
+  }));
-      value: priority.key,
-      query: priority.key,
-      content: (
-        <div className="flex items-center gap-2">
-          <div
-            className={cn("grid place-items-center border rounded p-0.5 flex-shrink-0", priorityClasses[priority.key], {
-              "bg-red-500 border-red-500": priority.key === "urgent" && highlightUrgent,
-            })}
-          >
-            <PriorityIcon
-              priority={priority.key}
-              size={14}
-              className={cn({
-                "text-white": priority.key === "urgent" && highlightUrgent,
-                // centre align the icons if text is hidden
-                "translate-x-[0.0625rem]": priority.key === "high",
-                "translate-x-0.5": priority.key === "medium",
-                "translate-x-1": priority.key === "low",
-              })}
-            />
-          </div>
-          <span className="flex-grow truncate">{priority.title}</span>
-        </div>
-      ),
-    };
-  });
 
   const filteredOptions =
     query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
@@ -325,14 +295,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             {buttonVariant === "border-with-text" ? (
               <BorderButton
                 priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
               />
             ) : buttonVariant === "border-without-text" ? (
               <BorderButton
                 priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
                 hideText
@@ -340,14 +314,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             ) : buttonVariant === "background-with-text" ? (
               <BackgroundButton
                 priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
               />
             ) : buttonVariant === "background-without-text" ? (
               <BackgroundButton
                 priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
                 hideText
@@ -355,14 +333,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             ) : buttonVariant === "transparent-with-text" ? (
               <TransparentButton
                 priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
               />
             ) : buttonVariant === "transparent-without-text" ? (
               <TransparentButton
                 priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
                 hideText
@@ -400,6 +382,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                         active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
+                    onClick={closeDropdown}
                   >
                     {({ selected }) => (
                       <>

web/components/dropdowns/project.tsx

@@ -2,7 +2,6 @@ import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useProject } from "hooks/store";
@@ -13,20 +12,13 @@ import { cn } from "helpers/common.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IProject } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";
 
-type Props = {
+type Props = TDropdownProps & {
   button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
   dropdownArrow?: boolean;
   onChange: (val: string) => void;
-  placement?: Placement;
   value: string | null;
-  tabIndex?: number;
 };
 
 type ButtonProps = {
@@ -166,9 +158,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
+      className={cn("h-full flex-shrink-0", className)}
-        className,
-      })}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -271,6 +261,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/state.tsx

@@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useApplication, useProjectState } from "hooks/store";
@@ -14,21 +13,14 @@ import { StateGroupIcon } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { IState } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";
 
-type Props = {
+type Props = TDropdownProps & {
   button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
   dropdownArrow?: boolean;
   onChange: (val: string) => void;
-  placement?: Placement;
   projectId: string;
   value: string;
-  tabIndex?: number;
 };
 
 type ButtonProps = {
@@ -159,9 +151,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
+      className={cn("h-full flex-shrink-0", className)}
-        className,
-      })}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -264,6 +254,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/types.d.ts

@@ -1,3 +1,5 @@
+import { Placement } from "@popperjs/core";
+
 export type TButtonVariants =
   | "border-with-text"
   | "border-without-text"
@@ -5,3 +7,13 @@ export type TButtonVariants =
   | "background-without-text"
   | "transparent-with-text"
   | "transparent-without-text";
+
+export type TDropdownProps = {
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  buttonVariant: TButtonVariants;
+  className?: string;
+  disabled?: boolean;
+  placement?: Placement;
+  tabIndex?: number;
+};

web/components/headers/cycle-issues.tsx

@@ -180,7 +180,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     </>
                   }
                   className="ml-1.5 flex-shrink-0"
-                  width="auto"
                   placement="bottom-start"
                 >
                   {currentProjectCycleIds?.map((cycleId) => (

web/components/headers/module-issues.tsx

@@ -183,7 +183,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                     </>
                   }
                   className="ml-1.5 flex-shrink-0"
-                  width="auto"
                   placement="bottom-start"
                 >
                   {projectModuleIds?.map((moduleId) => (

web/components/integration/jira/give-details.tsx

@@ -161,7 +161,6 @@ export const JiraGetImportDetail: React.FC = observer(() => {
               <CustomSelect
                 value={value}
                 input
-                width="w-full"
                 onChange={onChange}
                 label={
                   <span>
@@ -172,6 +171,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                     )}
                   </span>
                 }
+                optionsClassName="w-full"
               >
                 {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
                   workspaceProjectIds.map((projectId) => {

web/components/integration/jira/import-users.tsx

@@ -82,7 +82,7 @@ export const JiraImportUsers: FC = () => {
                         input
                         value={value}
                         onChange={onChange}
-                        width="w-full"
+                        optionsClassName="w-full"
                         label={<span className="capitalize">{Boolean(value) ? value : ("Ignore" as any)}</span>}
                       >
                         <CustomSelect.Option value="invite">Invite by email</CustomSelect.Option>

web/components/issues/issue-detail/cycle-select.tsx

@@ -93,7 +93,6 @@ export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) =>
             </Tooltip>
           </div>
         }
-        width="max-w-[10rem]"
         noChevron
         disabled={disableSelect}
       />

web/components/issues/issue-detail/module-select.tsx

@@ -93,7 +93,6 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
             </Tooltip>
           </div>
         }
-        width="max-w-[10rem]"
         noChevron
         disabled={disableSelect}
       />

web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -135,7 +135,6 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
         {!disableIssueCreation &&
           (renderExistingIssueModal ? (
             <CustomMenu
-              width="auto"
               customButton={
                 <span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
                   <Plus height={14} width={14} strokeWidth={2} />

web/components/issues/issue-layouts/list/block.tsx

@@ -73,7 +73,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
           {!issue?.tempId ? (
             <>
               <IssueProperties
-                className="relative flex items-center gap-2 overflow-x-auto whitespace-nowrap"
+                className="relative flex items-center gap-2 whitespace-nowrap"
                 issue={issue}
                 isReadOnly={!canEditIssueProperties}
                 handleIssues={updateIssue}

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -70,7 +70,6 @@ export const HeaderGroupByCard = observer(
           {!disableIssueCreation &&
             (renderExistingIssueModal ? (
               <CustomMenu
-                width="auto"
                 customButton={
                   <span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
                     <Plus className="h-3.5 w-3.5" strokeWidth={2} />

web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx

@@ -62,7 +62,6 @@ export const SpreadsheetHeaderColumn = (props: Props) => {
           </div>
         </div>
       }
-      width="xl"
       placement="bottom-end"
     >
       <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>

web/components/issues/sub-issues/issue-list-item.tsx

@@ -134,7 +134,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
           </div>
 
           <div className="flex-shrink-0 text-sm">
-            <CustomMenu width="auto" placement="bottom-end" ellipsis>
+            <CustomMenu placement="bottom-end" ellipsis>
               {disabled && (
                 <CustomMenu.MenuItem onClick={() => handleIssueCrudState("update", parentIssueId, issue)}>
                   <div className="flex items-center gap-2">

web/components/issues/view-select/estimate.tsx

@@ -42,7 +42,7 @@ export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
       maxHeight="md"
       noChevron
       disabled={disabled}
-      width="w-full min-w-[8rem]"
+      optionsClassName="w-full"
     >
       <CustomSelect.Option value={null}>
         <>

web/components/modules/module-card-item.tsx

@@ -232,7 +232,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                     </button>
                   ))}
 
-                <CustomMenu width="auto" ellipsis className="z-10">
+                <CustomMenu ellipsis className="z-10">
                   {isEditingAllowed && (
                     <>
                       <CustomMenu.MenuItem onClick={handleEditModule}>

web/components/modules/module-list-item.tsx

@@ -209,7 +209,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                 </button>
               ))}
 
-            <CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
+            <CustomMenu verticalEllipsis buttonClassName="z-[1]">
               {isEditingAllowed && (
                 <>
                   <CustomMenu.MenuItem onClick={handleEditModule}>

web/components/modules/sidebar.tsx

@@ -291,7 +291,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               <LinkIcon className="h-3 w-3 text-custom-text-300" />
             </button>
             {isEditingAllowed && (
-              <CustomMenu width="lg" placement="bottom-end" ellipsis>
+              <CustomMenu placement="bottom-end" ellipsis>
                 <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
                   <span className="flex items-center justify-start gap-2">
                     <Trash2 className="h-3 w-3" />

web/components/notifications/select-snooze-till-modal.tsx

@@ -200,7 +200,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                                 )}
                               </div>
                             }
-                            width="w-full"
+                            optionsClassName="w-full"
                             input
                           >
                             <div className="mb-2 flex h-9 w-full overflow-hidden rounded">

web/components/pages/pages-list/list-item.tsx

@@ -235,7 +235,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                 >
                   <AlertCircle className="h-3.5 w-3.5" />
                 </Tooltip>
-                <CustomMenu width="auto" placement="bottom-end" className="!-m-1" verticalEllipsis>
+                <CustomMenu placement="bottom-end" className="!-m-1" verticalEllipsis>
                   {archived_at ? (
                     <>
                       {userCanArchive && (

web/components/project/member-select.tsx

@@ -69,7 +69,6 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
         ]
       }
       maxHeight="md"
-      width="w-full"
       onChange={onChange}
       disabled={isDisabled}
     />

web/components/project/send-project-invitation-modal.tsx

@@ -236,7 +236,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                       onChange(val);
                                     }}
                                     options={options}
-                                    width="w-full min-w-[12rem]"
+                                    optionsClassName="w-full"
                                   />
                                 );
                               }}
@@ -266,7 +266,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                       </div>
                                     }
                                     input
-                                    width="w-full"
+                                    optionsClassName="w-full"
                                   >
                                     {Object.entries(ROLE).map(([key, label]) => {
                                       if (parseInt(key) > (currentProjectRole ?? EUserProjectRoles.GUEST)) return null;

web/components/states/create-state-modal.tsx

@@ -160,7 +160,7 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
                               value={value}
                               label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
                               onChange={onChange}
-                              width="w-full"
+                              optionsClassName="w-full"
                               input
                             >
                               {Object.keys(GROUP_CHOICES).map((key) => (

web/components/views/view-list-item.tsx

@@ -123,7 +123,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                       </button>
                     ))}
 
-                  <CustomMenu width="auto" ellipsis>
+                  <CustomMenu ellipsis>
                     {isEditingAllowed && (
                       <>
                         <CustomMenu.MenuItem

web/components/workspace/create-workspace-form.tsx

@@ -201,7 +201,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   }
                   buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
                   input
-                  width="w-full"
+                  optionsClassName="w-full"
                 >
                   {ORGANIZATION_SIZE.map((item) => (
                     <CustomSelect.Option key={item} value={item}>

web/components/workspace/send-workspace-invitation-modal.tsx

@@ -165,7 +165,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                                   value={value}
                                   label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
                                   onChange={onChange}
-                                  width="w-full"
+                                  optionsClassName="w-full"
                                   input
                                 >
                                   {Object.entries(ROLE).map(([key, value]) => {

web/components/workspace/settings/workspace-details.tsx

@@ -247,7 +247,7 @@ export const WorkspaceDetails: FC = observer(() => {
                     value={value}
                     onChange={onChange}
                     label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
-                    width="w-full"
+                    optionsClassName="w-full"
                     buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
                     input
                     disabled={!isAdmin}

web/components/workspace/views/view-list-item.tsx

@@ -54,7 +54,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
                   <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
                     {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
                   </p>
-                  <CustomMenu width="auto" ellipsis>
+                  <CustomMenu ellipsis>
                     <CustomMenu.MenuItem
                       onClick={(e) => {
                         e.preventDefault();

web/pages/profile/index.tsx

@@ -284,7 +284,9 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                       ref={ref}
                       hasError={Boolean(errors.email)}
                       placeholder="Enter your email"
-                      className={`w-full rounded-md cursor-not-allowed !bg-custom-background-80 ${errors.email ? "border-red-500" : ""}`}
+                      className={`w-full rounded-md cursor-not-allowed !bg-custom-background-80 ${
+                        errors.email ? "border-red-500" : ""
+                      }`}
                       disabled
                     />
                   )}
@@ -306,7 +308,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                       label={value ? value.toString() : "Select your role"}
                       buttonClassName={errors.role ? "border-red-500" : "border-none"}
                       className="rounded-md border-[0.5px] !border-custom-border-200"
-                      width="w-full"
+                      optionsClassName="w-full"
                       input
                     >
                       {USER_ROLES.map((item) => (