enable interaction with other components when a dropdown is open (#8432)

ohcnetwork · Sep 2, 2024 · 43de4e7 · 43de4e7
1 parent 93347f4
commit 43de4e7
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 26 deletions.
diff --git 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
@@ -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
@@ -1,20 +1,21 @@
-import { useEffect, useState, useMemo } from "react";
 import {
   Combobox,
   ComboboxButton,
   ComboboxInput,
   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
@@ -1,17 +1,18 @@
-import { useEffect, useState } from "react";
 import {
   Combobox,
   ComboboxButton,
   ComboboxInput,
   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
@@ -1,17 +1,18 @@
-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,
   ComboboxInput,
   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
@@ -1,14 +1,15 @@
-import CareIcon from "../../CAREUI/icons/CareIcon";
 import {
   Label,
   Listbox,
   ListboxButton,
   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
@@ -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"