Support portal Listbox (Select), Combobox, or Menu (Dropdown) inside of Modal

[jaider]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-mgedky?file=src/App.jsx
https://headlessui.com/react/listbox
https://headlessui.com/react/dialog

Describe your issue

When open the dropdown the list is cut off by the modal window.
Expected: the dropdown goes over the modal window.

[RobinMalfait]

You can do this by rendering the Menu.Items, Listbox.Options or Combobox.Options in a portal and then you can use a tool like Popper.js or Floating UI to position it correctly.

An example of those can be seen here: https://github.com/tailwindlabs/headlessui/blob/main/packages/playground-react/pages/menu/menu-with-popper.tsx

[ragulka]

How about using a ComboBox inside a Popover? When rendering the ComboboxOptions to a portal, clicking on a combobox option will close the popover.

[holoiii]

Had the exact same issue today FWIW, when using Popover/Combobox/FloatingPortal (from floating-ui):

<Popover>
  <Popover.Button>
    Open popover
  </Popover.Button>

  <Popover.Panel>
    <Combobox>
      <Combobox.Button>
        Open dropdown
      </Combobox.Button>
      <FloatingPortal>
        <Combobox.Options ... />
      </FloatingPortal>
    </Combobox>
  </Popover.Panel>
</Popover>

Clicking on the combobox button will close the popover. My use case is I have a form inside of a popover that also has a multiselect/combobox field in it. I need the FloatingPortal because the combobox component is used elsewhere

[JhonnK08]

With the Portal around the Options, does the listener of keys (arrow down and up) in the options works? I'm having this problem right now 😢

[dwilt]

@JhonnK08 No, it doesn't seem to work.

[informatJonas]

How does this work for Vue?

[hreynier]

Not sure if you resolved this already, but I managed to solve a similar issue by using the headlessui-float library.

---

Here I use the Float component between Listbox and it's Button and Options children, so that the Options are rendered through the floating portal.

import { Float } from '@headlessui-float/react';
import { Listbox, Dialog } from '@headlessui/react';

export const Example = (props: Props) => {
return (
   <Dialog
      as="div"
        className="relative"
        initialFocus={props.initialFocus}
        onClose={() => props.onClose()}
   >
     {/** Whatever dialog styling you want here */}
     <Listbox value={selected} onChange={onChange}>
            {({ open }) => (
              <Float
                as="div"
                className="relative"
                placement="bottom"
                offset={4}
                floatingAs={Fragment}
              >
                <Listbox.Button
                  className={}
                >
                </Listbox.Button>
                <Listbox.Options className="">
                  {options.map((option, idx) => (
                    <Listbox.Option
                      key={idx}
                      className={}
                      value={version}
                    >
                      {({ selected, active }) => (
                        {/** Options */}
                      )}
                    </Listbox.Option>
                  ))}
                </Listbox.Options>
              </Float>
            )}
          </Listbox>
   </Dialog>
)
};

---

With this setup, I was able to have the listbox options render on top of any elements in the dialog without causing the dialog to grow in height.