From f6b95b8d312b9ab22aca9081c7946b4057890130 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Thu, 2 Nov 2023 15:59:43 +0530
Subject: [PATCH] fix: Issue properties dropdown overflow issue for date and
 labels (#2604)

---
 web/components/issues/select/cycle.tsx  |   3 +-
 web/components/issues/select/date.tsx   | 121 +++++++-----
 web/components/issues/select/label.tsx  | 248 +++++++++++++-----------
 web/components/issues/select/module.tsx |   3 +-
 4 files changed, 205 insertions(+), 170 deletions(-)

diff --git a/web/components/issues/select/cycle.tsx b/web/components/issues/select/cycle.tsx
index 6d43ead41..3df4948a7 100644
--- a/web/components/issues/select/cycle.tsx
+++ b/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
diff --git a/web/components/issues/select/date.tsx b/web/components/issues/select/date.tsx
index 2408bf4e1..e3c2b9614 100644
--- a/web/components/issues/select/date.tsx
+++ b/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,54 +15,73 @@ type Props = {
   value: string | null;
 };
 
-export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onChange, value }) => (
-  <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">
-          <span className="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>
-                <button onClick={() => onChange(null)}>
-                  <X className="h-3 w-3" />
-                </button>
-              </>
-            ) : (
-              <>
-                <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
-                <span>{label}</span>
-              </>
-            )}
-          </span>
-        </Popover.Button>
+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);
 
-        <Transition
-          as={React.Fragment}
-          enter="transition ease-out duration-200"
-          enterFrom="opacity-0 translate-y-1"
-          enterTo="opacity-100 translate-y-0"
-          leave="transition ease-in duration-150"
-          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">
-            <DatePicker
-              selected={value ? new Date(value) : null}
-              onChange={(val) => {
-                if (!val) onChange("");
-                else onChange(renderDateFormat(val));
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
 
-                close();
-              }}
-              dateFormat="dd-MM-yyyy"
-              minDate={minDate}
-              maxDate={maxDate}
-              inline
-            />
-          </Popover.Panel>
-        </Transition>
-      </>
-    )}
-  </Popover>
-);
+  return (
+    <Popover className="relative flex items-center justify-center  rounded-lg">
+      {({ close }) => (
+        <>
+          <Popover.Button>
+            <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>
+                  <button onClick={() => onChange(null)}>
+                    <X className="h-3 w-3" />
+                  </button>
+                </>
+              ) : (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>{label}</span>
+                </>
+              )}
+            </div>
+          </Popover.Button>
+
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <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) => {
+                    if (!val) onChange("");
+                    else onChange(renderDateFormat(val));
+
+                    close();
+                  }}
+                  dateFormat="dd-MM-yyyy"
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  inline
+                />
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
index 6319ee207..b7a828d8f 100644
--- a/web/components/issues/select/label.tsx
+++ b/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,21 +51,26 @@ 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">
-            {value && value.length > 0 ? (
-              <span className="flex items-center justify-center gap-2 text-xs">
-                <IssueLabelsList
-                  labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
-                  length={3}
-                  showLength
-                />
-              </span>
-            ) : (
-              <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
-                <Tag className="h-3.5 w-3.5 text-custom-text-200" />
-                <span className=" text-custom-text-200">Label</span>
-              </span>
-            )}
+          <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
+                    labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
+                    length={3}
+                    showLength
+                  />
+                </span>
+              ) : (
+                <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
+                  <Tag className="h-3.5 w-3.5 text-custom-text-200" />
+                  <span className=" text-custom-text-200">Label</span>
+                </span>
+              )}
+            </div>
           </Combobox.Button>
 
           <Transition
@@ -70,110 +83,115 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
+            <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`}
-            >
-              <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" />
-                <Combobox.Input
-                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search for label..."
-                  displayValue={(assigned: any) => assigned?.name}
-                />
-              </div>
-              <div className="py-1.5">
-                {issueLabels && filteredOptions ? (
-                  filteredOptions.length > 0 ? (
-                    filteredOptions.map((label) => {
-                      const children = issueLabels?.filter((l) => l.parent === label.id);
+                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" />
+                  <Combobox.Input
+                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder="Search for label..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div className="py-1.5">
+                  {issueLabels && filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((label) => {
+                        const children = issueLabels?.filter((l) => l.parent === label.id);
 
-                      if (children.length === 0) {
-                        if (!label.parent)
-                          return (
-                            <Combobox.Option
-                              key={label.id}
-                              className={({ active }) =>
-                                `${
-                                  active ? "bg-custom-background-80" : ""
-                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
-                              }
-                              value={label.id}
-                            >
-                              {({ selected }) => (
-                                <div className="flex w-full justify-between gap-2 rounded">
-                                  <div className="flex items-center justify-start gap-2">
-                                    <span
-                                      className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-                                      style={{
-                                        backgroundColor: label.color,
-                                      }}
-                                    />
-                                    <span>{label.name}</span>
-                                  </div>
-                                  <div className="flex items-center justify-center rounded p-1">
-                                    <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                  </div>
-                                </div>
-                              )}
-                            </Combobox.Option>
-                          );
-                      } else
-                        return (
-                          <div className="border-y border-custom-border-200">
-                            <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
-                              <Component className="h-3 w-3" /> {label.name}
-                            </div>
-                            <div>
-                              {children.map((child) => (
-                                <Combobox.Option
-                                  key={child.id}
-                                  className={({ active }) =>
-                                    `${
-                                      active ? "bg-custom-background-80" : ""
-                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
-                                  }
-                                  value={child.id}
-                                >
-                                  {({ selected }) => (
-                                    <div className="flex w-full justify-between gap-2 rounded">
-                                      <div className="flex items-center justify-start gap-2">
-                                        <span
-                                          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
-                                          style={{
-                                            backgroundColor: child?.color,
-                                          }}
-                                        />
-                                        <span>{child.name}</span>
-                                      </div>
-                                      <div className="flex items-center justify-center rounded p-1">
-                                        <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                      </div>
+                        if (children.length === 0) {
+                          if (!label.parent)
+                            return (
+                              <Combobox.Option
+                                key={label.id}
+                                className={({ active }) =>
+                                  `${
+                                    active ? "bg-custom-background-80" : ""
+                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                }
+                                value={label.id}
+                              >
+                                {({ selected }) => (
+                                  <div className="flex w-full justify-between gap-2 rounded">
+                                    <div className="flex items-center justify-start gap-2">
+                                      <span
+                                        className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                        style={{
+                                          backgroundColor: label.color,
+                                        }}
+                                      />
+                                      <span>{label.name}</span>
                                     </div>
-                                  )}
-                                </Combobox.Option>
-                              ))}
+                                    <div className="flex items-center justify-center rounded p-1">
+                                      <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                    </div>
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            );
+                        } else
+                          return (
+                            <div className="border-y border-custom-border-200">
+                              <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
+                                <Component className="h-3 w-3" /> {label.name}
+                              </div>
+                              <div>
+                                {children.map((child) => (
+                                  <Combobox.Option
+                                    key={child.id}
+                                    className={({ active }) =>
+                                      `${
+                                        active ? "bg-custom-background-80" : ""
+                                      } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                    }
+                                    value={child.id}
+                                  >
+                                    {({ selected }) => (
+                                      <div className="flex w-full justify-between gap-2 rounded">
+                                        <div className="flex items-center justify-start gap-2">
+                                          <span
+                                            className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                            style={{
+                                              backgroundColor: child?.color,
+                                            }}
+                                          />
+                                          <span>{child.name}</span>
+                                        </div>
+                                        <div className="flex items-center justify-center rounded p-1">
+                                          <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                        </div>
+                                      </div>
+                                    )}
+                                  </Combobox.Option>
+                                ))}
+                              </div>
                             </div>
-                          </div>
-                        );
-                    })
+                          );
+                      })
+                    ) : (
+                      <p className="px-2 text-xs text-custom-text-200">No labels found</p>
+                    )
                   ) : (
-                    <p className="px-2 text-xs text-custom-text-200">No labels found</p>
-                  )
-                ) : (
-                  <p className="px-2 text-xs text-custom-text-200">Loading...</p>
-                )}
-                <button
-                  type="button"
-                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
-                  onClick={() => setIsOpen(true)}
-                >
-                  <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>
-                </button>
+                    <p className="px-2 text-xs text-custom-text-200">Loading...</p>
+                  )}
+                  <button
+                    type="button"
+                    className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
+                    onClick={() => setIsOpen(true)}
+                  >
+                    <span className="flex items-center justify-start gap-1 text-custom-text-200">
+                      <Plus className="h-4 w-4" aria-hidden="true" />
+                      <span className="whitespace-nowrap">Create New Label</span>
+                    </span>
+                  </button>
+                </div>
               </div>
             </Combobox.Options>
           </Transition>
diff --git a/web/components/issues/select/module.tsx b/web/components/issues/select/module.tsx
index bb9117d54..c0d9c6c4c 100644
--- a/web/components/issues/select/module.tsx
+++ b/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