From 43de4e725bac94ac6554dd8a15754a15b46baba7 Mon Sep 17 00:00:00 2001
From: Khavin Shankar <khavinshankar@gmail.com>
Date: Mon, 2 Sep 2024 19:11:38 +0530
Subject: [PATCH] enable interaction with other components when a dropdown is
 open (#8432)

---
 src/Components/CameraFeed/AssetBedSelect.tsx     |  6 ++++--
 src/Components/Common/components/Menu.tsx        |  7 ++++---
 src/Components/Form/AutoCompleteAsync.tsx        | 12 +++++++-----
 src/Components/Form/FormFields/Autocomplete.tsx  | 10 ++++++----
 .../Form/FormFields/AutocompleteMultiselect.tsx  | 16 +++++++++-------
 src/Components/Form/MultiSelectMenuV2.tsx        |  6 ++++--
 src/Components/Form/SelectMenuV2.tsx             | 11 ++++++++---
 7 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx
index b97675c7b31..18bef259b2b 100644
--- a/src/Components/CameraFeed/AssetBedSelect.tsx
+++ b/src/Components/CameraFeed/AssetBedSelect.tsx
@@ -1,14 +1,15 @@
-import { AssetBedModel } from "../Assets/AssetTypes";
 import {
   Listbox,
   ListboxButton,
   ListboxOption,
   ListboxOptions,
 } from "@headlessui/react";
+
+import { AssetBedModel } from "../Assets/AssetTypes";
+import ButtonV2 from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { classNames } from "../../Utils/utils";
 import { dropdownOptionClassNames } from "../Form/MultiSelectMenuV2";
-import ButtonV2 from "../Common/components/ButtonV2";
 
 interface Props {
   disabled?: boolean;
@@ -108,6 +109,7 @@ export const CameraPresetDropdown = (
           </span>
         </ListboxButton>
         <ListboxOptions
+          modal={false}
           as="ul"
           className="absolute z-20 max-h-48 w-full overflow-auto rounded-b-lg bg-white py-1 text-base shadow-lg ring-1 ring-secondary-500 focus:outline-none md:max-h-60"
         >
diff --git a/src/Components/Common/components/Menu.tsx b/src/Components/Common/components/Menu.tsx
index 166b55737ea..14dabfe9781 100644
--- a/src/Components/Common/components/Menu.tsx
+++ b/src/Components/Common/components/Menu.tsx
@@ -1,9 +1,9 @@
 import { Anyone, AuthorizedElementProps } from "../../../Utils/AuthorizeFor";
-
 import { ButtonSize, ButtonVariant } from "./ButtonV2";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { classNames } from "../../../Utils/utils";
 import { useIsAuthorized } from "../../../Common/hooks/useIsAuthorized";
 
@@ -51,6 +51,7 @@ export default function DropdownMenu({
         </MenuButton>
 
         <MenuItems
+          modal={false}
           className={`absolute right-0 z-10 mt-2 min-w-full origin-top-right rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none sm:min-w-[250px] md:w-max ${props.itemClassName}`}
         >
           <>{props.children}</>
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index 9b4c1f876e4..1cd07a93df1 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState, useMemo } from "react";
 import {
   Combobox,
   ComboboxButton,
@@ -6,15 +5,17 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from "@headlessui/react";
-import { debounce } from "lodash-es";
-import { DropdownTransition } from "../Common/components/HelperComponents";
-import CareIcon from "../../CAREUI/icons/CareIcon";
 import {
   MultiSelectOptionChip,
   dropdownOptionClassNames,
 } from "./MultiSelectMenuV2";
-import { useTranslation } from "react-i18next";
+import { useEffect, useMemo, useState } from "react";
+
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { DropdownTransition } from "../Common/components/HelperComponents";
 import { classNames } from "../../Utils/utils";
+import { debounce } from "lodash-es";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   id?: string;
@@ -153,6 +154,7 @@ const AutoCompleteAsync = (props: Props) => {
           </div>
           <DropdownTransition>
             <ComboboxOptions
+              modal={false}
               as="ul"
               className="cui-dropdown-base absolute top-12 z-10 text-sm"
             >
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index 7802a296201..2addbfa9b33 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import {
   Combobox,
   ComboboxButton,
@@ -6,12 +5,14 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from "@headlessui/react";
-import { DropdownTransition } from "../../Common/components/HelperComponents";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
-import { dropdownOptionClassNames } from "../MultiSelectMenuV2";
 import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
+import { useEffect, useState } from "react";
+
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import { DropdownTransition } from "../../Common/components/HelperComponents";
 import FormField from "./FormField";
 import { classNames } from "../../../Utils/utils";
+import { dropdownOptionClassNames } from "../MultiSelectMenuV2";
 import { useTranslation } from "react-i18next";
 
 type OptionCallback<T, R> = (option: T) => R;
@@ -209,6 +210,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
 
           <DropdownTransition>
             <ComboboxOptions
+              modal={false}
               as="ul"
               className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right"
             >
diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
index 4e7892a6a64..4e9386afeba 100644
--- a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -1,10 +1,3 @@
-import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
-import {
-  MultiSelectOptionChip,
-  dropdownOptionClassNames,
-} from "../MultiSelectMenuV2";
-import { ReactNode, useEffect, useRef, useState } from "react";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
 import {
   Combobox,
   ComboboxButton,
@@ -12,6 +5,14 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from "@headlessui/react";
+import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
+import {
+  MultiSelectOptionChip,
+  dropdownOptionClassNames,
+} from "../MultiSelectMenuV2";
+import { ReactNode, useEffect, useRef, useState } from "react";
+
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { DropdownTransition } from "../../Common/components/HelperComponents";
 import FormField from "./FormField";
 import { classNames } from "../../../Utils/utils";
@@ -176,6 +177,7 @@ export const AutocompleteMutliSelect = <T, V>(
 
           <DropdownTransition>
             <ComboboxOptions
+              modal={false}
               as="ul"
               className="cui-dropdown-base absolute top-12 z-10 mt-0.5"
             >
diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index e728260e142..d3a46cdb1f9 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -1,4 +1,3 @@
-import CareIcon from "../../CAREUI/icons/CareIcon";
 import {
   Label,
   Listbox,
@@ -6,9 +5,11 @@ import {
   ListboxOption,
   ListboxOptions,
 } from "@headlessui/react";
-import { classNames } from "../../Utils/utils";
 import { ReactNode, useRef } from "react";
 
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { classNames } from "../../Utils/utils";
+
 type OptionCallback<T, R = void> = (option: T) => R;
 
 type Props<T, V = T> = {
@@ -135,6 +136,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
               </ListboxButton>
             </div>
             <ListboxOptions
+              modal={false}
               as="ul"
               className="cui-dropdown-base absolute top-full"
             >
diff --git a/src/Components/Form/SelectMenuV2.tsx b/src/Components/Form/SelectMenuV2.tsx
index 379eb7b7315..cea890b7330 100644
--- a/src/Components/Form/SelectMenuV2.tsx
+++ b/src/Components/Form/SelectMenuV2.tsx
@@ -5,10 +5,11 @@ import {
   ListboxOption,
   ListboxOptions,
 } from "@headlessui/react";
+
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { dropdownOptionClassNames } from "./MultiSelectMenuV2";
-import { classNames } from "../../Utils/utils";
 import { ReactNode } from "react";
+import { classNames } from "../../Utils/utils";
+import { dropdownOptionClassNames } from "./MultiSelectMenuV2";
 
 type OptionCallback<T, R> = (option: T) => R;
 
@@ -131,7 +132,11 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                 props.position === "above" ? "bottom-0 mb-12" : "top-0 mt-12",
               )}
             >
-              <ListboxOptions as="ul" className="cui-dropdown-base">
+              <ListboxOptions
+                modal={false}
+                as="ul"
+                className="cui-dropdown-base"
+              >
                 {options.map((option, index) => (
                   <ListboxOption
                     as="li"