[insiders] Clicking outside an anchored Listbox menu inside a Dialog closes the dialog

[benface]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

0.0.0-insiders.9f44656

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/sandbox/amazing-glitter-forked-xs5hlx?file=%2Fsrc%2FApp.tsx%3A21%2C1

Describe your issue

Open the dialog and then the listbox inside it, then click anywhere in the light gray area (that's the dialog – sorry again for how bad this looks). Notice how not only the listbox menu closes, but the whole dialog does too, even though we just clicked inside it.

Notice that the issue does NOT happen if you:

• remove the anchor prop from Listbox.Options
• add modal={false} to Listbox.Options

[RobinMalfait]

Hey!

Don't apologise about the looks of this, this is almost even preferred because it is a very minimal reproduction repo that gets the job done. Sometimes styling is required, but in this case it's perfectly file.

Thanks!

[RobinMalfait]

Hey, me again!

This should be fixed by #3111, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.