[WEB-2445] fix: date picker and member picker dropdown z-index for list, kanban and spreadsheet views

web/core/components/dropdowns/date.tsx

@@ -20,6 +20,7 @@ import { TDropdownProps } from "./types";
 
 type Props = TDropdownProps & {
   clearIconClassName?: string;
+  optionsClassName?: string;
   icon?: React.ReactNode;
   isClearable?: boolean;
   minDate?: Date;
@@ -39,6 +40,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
     buttonVariant,
     className = "",
     clearIconClassName = "",
+    optionsClassName = "",
     closeOnSelect = true,
     disabled = false,
     hideIcon = false,
@@ -164,7 +166,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
             <div
               className={cn(
                 "my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
-                className
+                optionsClassName
               )}
               ref={setPopperElement}
               style={styles.popper}

web/core/components/dropdowns/member/index.tsx

@@ -22,6 +22,7 @@ type Props = {
   icon?: LucideIcon;
   onClose?: () => void;
   renderByDefault?: boolean;
+  optionsClassName? : string;
 } & MemberDropdownProps;
 
 export const MemberDropdown: React.FC<Props> = observer((props) => {
@@ -34,6 +35,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     disabled = false,
     dropdownArrow = false,
     dropdownArrowClassName = "",
+    optionsClassName = "",
     hideIcon = false,
     multiple,
     onChange,
@@ -162,7 +164,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     >
       {isOpen && (
         <MemberOptions
-          className={className}
+          optionsClassName={optionsClassName}
           isOpen={isOpen}
           projectId={projectId}
           placement={placement}

web/core/components/dropdowns/member/member-options.tsx

@@ -17,14 +17,15 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 
 interface Props {
   className? : string;
+  optionsClassName?: string;
   projectId?: string;
   referenceElement: HTMLButtonElement | null;
   placement: Placement | undefined;
   isOpen: boolean;
 }
 
 export const MemberOptions = observer((props: Props) => {
-  const { projectId, referenceElement, placement, isOpen, className="" } = props;
+  const { projectId, referenceElement, placement, isOpen, optionsClassName="" } = props;
   // states
   const [query, setQuery] = useState("");
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -95,7 +96,7 @@ export const MemberOptions = observer((props: Props) => {
     <Combobox.Options data-prevent-outside-click static>
       <div
         className={cn("my-1 w-48 rounded 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 z-20",
-          className)}
+          optionsClassName)}
         ref={setPopperElement}
         style={{
           ...styles.popper,

web/core/components/issues/issue-layouts/properties/all-properties.tsx

@@ -330,8 +330,8 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             placeholder="Start date"
             icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
+            optionsClassName="z-10"
             disabled={isReadOnly}
-            className="z-10"
             renderByDefault={isMobile}
             showTooltip
           />
@@ -350,8 +350,8 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
             buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
             clearIconClassName="!text-custom-text-100"
+            optionsClassName="z-10"
             disabled={isReadOnly}
-            className="z-10"
             renderByDefault={isMobile}
             showTooltip
           />
@@ -371,7 +371,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
             showTooltip={issue?.assignee_ids?.length === 0}
             placeholder="Assignees"
-            className="z-10"
+            optionsClassName="z-10"
             tooltipContent=""
             renderByDefault={isMobile}
           />

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

@@ -38,7 +38,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
         }
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
-        className="z-9"
+        optionsClassName="z-[9]"
         onClose={onClose}
       />
     </div>

web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx

@@ -53,7 +53,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
             "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
         )}
-        className="z-9"
+        optionsClassName="z-[9]"
         clearIconClassName="!text-custom-text-100"
         onClose={onClose}
       />

web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx

@@ -40,7 +40,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         buttonVariant="transparent-with-text"
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
-        className="z-9"
+        optionsClassName="z-[9]"
         onClose={onClose}
       />
     </div>