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

[oriyan-ovadia]

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