I have a modal component built with react, tailwind and headless-ui, which works fine until I add a dropdown box to it.
The issue here is that, when the dropdown is opened, it overflows within the modal, causing the modal to overflow further.
I want to stop the dropdown from overflowing within the modal. I want it to be visible outside the modal. Below is an image depiction of what I want:
My already existing code is the following:
const Modal = (props: Props) => {
return (
<Transition appear show={props.isOpen} as={Fragment}>
<Dialog
as="div"
className="relative z-30"
onClose={() => props.setOpen && props.setOpen(false)}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
<div
className={`fixed inset-0 flex flex-col items-center justify-center overflow-y-auto py-12`}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel
as="div"
className={`relative max-h-[85%] max-w-[80%] transform bg-white py-6 pr-0 text-left align-middle shadow-xl transition-all ${
!props.disableRoundedCorners ? 'rounded-lg' : ''
} ${props.width ?? 'w-6/12 '} ${props.height ?? 'h-[75%]'}`}
>
<div
className={`h-full w-full overflow-visible ${
props.height && 'overflow-y-auto'
}`}
>
{(!props.hideCloseButton || props.title) && (
<div className="sticky top-0 z-10 flex justify-between bg-white px-6 pb-4">
<Dialog.Title
as="div"
className="text-lg font-semibold leading-6 text-[#061941]"
>
{props.title}
</Dialog.Title>
<div className="">
{props.setOpen && !props.hideCloseButton && (
<button
type="button"
onClick={() => props.setOpen && props.setOpen(false)}
className="rounded-full bg-[#C4C4C4]/[.3] p-2 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-0"
>
<span className="sr-only">Close</span>
<Close />
</button>
)}
</div>
</div>
)}
{/* <div className=" flex flex-col px-6 ">{props.children}</div> */}
<div className=" flex flex-col px-6 ">
<div className="sm:flex sm:items-start">
<div className="mt-3 w-full text-center sm:mt-0 sm:text-left">
<main className="flex flex-1 overflow-y-auto">
<div className="grid w-full grid-cols-2 gap-4 px-1">
<div className="col-span-1">
<label className="text-sm">Phone Number</label>
<Listbox
value={country}
onChange={setCountry}
as="div"
className="relative flex w-full flex-col"
>
{({ open }) => (
<>
<div
className={`input input-group flex h-full w-full py-0 px-0`}
>
<Listbox.Button as={Fragment}>
<button
className={`px-4`}
disabled={props.disabled}
>
<FlagRenderer country={country} />
</button>
</Listbox.Button>
<input
type="tel"
name="phone"
placeholder="Phone Number"
className="input h-full w-full rounded-l-none px-2"
value={phone}
onChange={handlePhoneValueChange}
/>
</div>
{open && (
<div className="absolute top-14 left-0 z-10 h-32 w-full overflow-hidden rounded-lg border bg-white py-2 pl-4">
<Listbox.Options className="h-full overflow-auto focus:outline-none">
{countries.map(country => {
return (
<Listbox.Option
key={country.iso2}
value={country.iso2}
>
<div className="flex flex-nowrap justify-between pr-2">
<span className="flex space-x-2">
<FlagRenderer
country={country.iso2}
/>
<div>{country.name}</div>
</span>
<div>+{country.dialCode}</div>
</div>
</Listbox.Option>
);
})}
</Listbox.Options>
</div>
)}
</>
)}
</Listbox>
</div>
</div>
</main>
</div>
</div>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition>
);
};
