[insiders] Focus trapping broken with anchored, non-modal Listbox.Options inside Transition inside 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-c7sdrr?file=%2Fsrc%2FApp.tsx

Describe your issue

Using only the keyboard, open the dialog and then the listbox inside it (sorry for the lack of styles). Notice how the options menu is not automatically focused. If you tab, the link after the listbox gets focused, and if you tab again, then the menu gets focused and the focus is trapped.

Notice that the issue does NOT happen if you:

• remove the anchor or modal props from Listbox.Options
• don't wrap the Listbox.Options in a Transition
• don't wrap the Listbox in a Dialog

[RobinMalfait]

Hey!

Do you mind updating the CodeSandbox link or making it public. Currently seeing an error like this:

[benface]

Side quest bug: if you remove modal={false}, clicking outside the listbox when it's open closes not just the listbox, but the dialog as well.

EDIT: I opened a new issue for it.

[benface]

Ugh, sorry @RobinMalfait. 🤦‍♂️ Just made it public.

[RobinMalfait]

Hey!

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

You can already try it using:

• npm install @headlessui/react@insiders.