Using an `anchor` (or `portal`) with `ListboxOptions` doesn't work with Radix UI’s `Dialog` #3715

oriyan-ovadia · 2025-05-04T12:40:54Z

oriyan-ovadia
May 4, 2025

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.2

What browser are you using?

Chrome

Codesandbox

https://codesandbox.io/p/sandbox/jolly-wescoff-ypj3ym

Describe your issue

I'm using Radix UI's Dialog in my app, and also using Headless UI's Listbox. I ran into a problem where if I apply a portal to the ListboxOptions (either directly or via anchor, which does it automatically), the dropdown stops working, I can't select anything. If I don’t use anchor, everything works fine.

Just wondering if anyone else has run into this and found a workaround. I’m considering switching over to Headless UI's Dialog, but honestly, that’s a pretty big change for me right now.

Preview

With anchor

preview.-.with.anchor.mov

Without anchor

preview.-.without.anchor.mov

freddie-northam · 2026-07-15T08:14:54Z

freddie-northam
Jul 15, 2026

This is Radix's modal Dialog behavior, not a Headless UI bug.

When a Radix Dialog is modal (the default), Radix sets pointer-events: none on document.body and only re-enables them inside Dialog.Content (it applies pointer-events: auto there). That's how it blocks interaction with everything behind the dialog.

When you pass anchor (or portal) to ListboxOptions, Headless UI portals the options to document.body, i.e. outside the Dialog.Content subtree. So the options render on top and keyboard nav works, but pointer/mouse events are dead because they inherit pointer-events: none from <body>.

Fix: restore pointer events on the portaled panel:

<ListboxOptions anchor="bottom" className="pointer-events-auto">
  {/* ... */}
</ListboxOptions>

(or style={{ pointerEvents: 'auto' }} without Tailwind).

This won't cause the dialog to close on click, because Radix decides "outside click" from the React tree position, not the DOM position. Your Listbox is still a React descendant of Dialog.Content, so interacting with the options isn't treated as an outside interaction.

Side note: Radix's own Select works inside its Dialog for exactly this reason, it sets pointer events on its content wrapper. Headless UI's portaled popups don't, so you re-enable it yourself.

0 replies

Navigation Menu

Uh oh!

Using an `anchor` (or `portal`) with `ListboxOptions` doesn't work with Radix UI’s `Dialog` #3715

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Using an anchor (or portal) with ListboxOptions doesn't work with Radix UI’s Dialog #3715

Uh oh!

oriyan-ovadia May 4, 2025

What package within Headless UI are you using?

What version of that package are you using?

What browser are you using?

Codesandbox

Describe your issue

Preview

With anchor

Without anchor

Replies: 1 comment

Uh oh!

freddie-northam Jul 15, 2026

Using an `anchor` (or `portal`) with `ListboxOptions` doesn't work with Radix UI’s `Dialog` #3715

oriyan-ovadia
May 4, 2025

freddie-northam
Jul 15, 2026