fix: Issue properties dropdown overflow issue for date and labels (#2604)

web/components/issues/select/cycle.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-// popper js
-import { usePopper } from "react-popper";
 // ui
 import { Combobox } from "@headlessui/react";
 // icons

web/components/issues/select/date.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import React, { Fragment, useState } from "react";
-
+import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 import { CalendarDays, X } from "lucide-react";
 // react-datepicker
@@ -15,12 +15,23 @@ type Props = {
   value: string | null;
 };
 
-export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onChange, value }) => (
+export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onChange, value }) => {
+  const [referenceElement, setReferenceElement] = React.useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  return (
     <Popover className="relative flex items-center justify-center  rounded-lg">
       {({ close }) => (
         <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200">
+          <Popover.Button>
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
+            <div
+              ref={setReferenceElement}
+              className="cursor-pointer rounded-md border border-custom-border-200 shadow-sm duration-200 flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
+            >
               {value ? (
                 <>
                   <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
@@ -34,7 +45,7 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
                   <span>{label}</span>
                 </>
               )}
-          </span>
+            </div>
           </Popover.Button>
 
           <Transition
@@ -46,7 +57,13 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
+            <Popover.Panel>
+              <div
+                className="absolute top-10 -left-10 z-20 transform overflow-hidden"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
                 <DatePicker
                   selected={value ? new Date(value) : null}
                   onChange={(val) => {
@@ -60,9 +77,11 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
                   maxDate={maxDate}
                   inline
                 />
+              </div>
             </Popover.Panel>
           </Transition>
         </>
       )}
     </Popover>
-);
+  );
+};

web/components/issues/select/label.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Combobox, Transition } from "@headlessui/react";
+import { usePopper } from "react-popper";
 // services
 import { IssueLabelService } from "services/issue";
 // ui
@@ -29,6 +30,13 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
     workspaceSlug && projectId
@@ -43,7 +51,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     <Combobox as="div" value={value} onChange={(val) => onChange(val)} className="relative flex-shrink-0" multiple>
       {({ open }: any) => (
         <>
-          <Combobox.Button className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
+          <Combobox.Button as={Fragment}>
+            <div
+              ref={setReferenceElement}
+              className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200"
+            >
               {value && value.length > 0 ? (
                 <span className="flex items-center justify-center gap-2 text-xs">
                   <IssueLabelsList
@@ -58,6 +70,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   <span className=" text-custom-text-200">Label</span>
                 </span>
               )}
+            </div>
           </Combobox.Button>
 
           <Transition
@@ -70,9 +83,13 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Combobox.Options
+            <Combobox.Options as={Fragment}>
+              <div
                 className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
                 bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`}
+                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">
                   <Search className="h-3 w-3 text-custom-text-200" />
@@ -171,10 +188,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   >
                     <span className="flex items-center justify-start gap-1 text-custom-text-200">
                       <Plus className="h-4 w-4" aria-hidden="true" />
-                    <span>Create New Label</span>
+                      <span className="whitespace-nowrap">Create New Label</span>
                     </span>
                   </button>
                 </div>
+              </div>
             </Combobox.Options>
           </Transition>
         </>

web/components/issues/select/module.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-// popper js
-import { usePopper } from "react-popper";
 // ui
 import { Combobox } from "@headlessui/react";
 // icons