chore: dynamic postion dropdown

apps/app/components/ui/dropdowns/custom-search-select.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 // headless ui
 import { Combobox, Transition } from "@headlessui/react";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
@@ -47,6 +49,12 @@ export const CustomSearchSelect = ({
   verticalPosition = "bottom",
   width = "auto",
 }: CustomSearchSelectProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const dropdownContainer = useRef<any>(null);
+  const dropdownOptions = useRef<any>(null);
+  const dropdownBtn = useRef<any>(null);
+
   const [query, setQuery] = useState("");
 
   const filteredOptions =
@@ -62,21 +70,52 @@ export const CustomSearchSelect = ({
 
   if (multiple) props.multiple = true;
 
+  const handleOnOpen = () => {
+    const dropdownContainerRef = dropdownContainer.current;
+    const dropdownOptionsRef = dropdownOptions.current;
+    const dropdownBtnRef = dropdownBtn.current;
+
+    const dropdownWidth = dropdownOptionsRef?.clientWidth || 225;
+    const dropdownHeight = dropdownOptionsRef?.clientHeight || 206;
+
+    const dropdownBtnX = dropdownBtnRef.getBoundingClientRect().x || 0;
+    const dropdownBtnY = dropdownBtnRef.getBoundingClientRect().y || 0;
+    const dropdownBtnHeight = dropdownBtnRef?.clientHeight || 32;
+
+    let top = dropdownBtnY + dropdownBtnHeight;
+    if (dropdownBtnY + dropdownHeight > window.innerHeight)
+      top = dropdownBtnY - dropdownHeight - 10;
+
+    let left = dropdownBtnX;
+    if (dropdownBtnX + dropdownWidth > window.innerWidth) left = dropdownBtnX - dropdownWidth;
+
+    if (dropdownContainerRef) {
+      dropdownContainerRef.style.top = `${Math.round(top)}px`;
+      dropdownContainerRef.style.left = `${Math.round(left)}px`;
+    }
+  };
+
+  useOutsideClickDetector(dropdownOptions, () => {
+    if (isOpen) setIsOpen(false);
+  });
+
   return (
-    <Combobox
+    <Combobox as="div" className={`relative flex-shrink-0 text-left ${className}`} {...props}>
-      as="div"
-      className={`${selfPositioned ? "" : "relative"} flex-shrink-0 text-left ${className}`}
-      {...props}
-    >
       {({ open }: { open: boolean }) => {
-        if (open && onOpen) onOpen();
+        if (open) {
+          handleOnOpen();
+          if (onOpen) onOpen();
+        }
 
         return (
           <>
             {customButton ? (
-              <Combobox.Button as="div">{customButton}</Combobox.Button>
+              <Combobox.Button as="div" ref={dropdownBtn}>
+                {customButton}
+              </Combobox.Button>
             ) : (
               <Combobox.Button
+                ref={dropdownBtn}
                 type="button"
                 className={`flex items-center justify-between gap-1 w-full rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
                   input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
@@ -102,10 +141,10 @@ export const CustomSearchSelect = ({
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
+              <div ref={dropdownContainer} className={`fixed z-20 h-full w-full`}>
                 <Combobox.Options
-                className={`absolute z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
+                  ref={dropdownOptions}
-                  position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
+                  className={`fixed z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none   ${
-                } ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
                     width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
                   } ${optionsClassName}`}
                 >
@@ -154,7 +193,9 @@ export const CustomSearchSelect = ({
                                     }`}
                                   >
                                     <CheckIcon
-                                    className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                                      className={`h-3 w-3 ${
+                                        selected ? "opacity-100" : "opacity-0"
+                                      }`}
                                     />
                                   </div>
                                 ) : (
@@ -177,6 +218,7 @@ export const CustomSearchSelect = ({
                   </div>
                   {footerOption}
                 </Combobox.Options>
+              </div>
             </Transition>
           </>
         );