Dialog tab focus and navigation issue with Third Party Components

[boopathydreams]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

^0.0.0-insiders.6897d2c

What browser are you using?

Google Chrome

Reproduction URL

Codesandbox Link

Describe your issue

When using components like Multiselect, Flatpickr, etc., the focus is always changed to body when the third party components closes after select and the tab navigation starts from the beginning. Also, tab navigation always skips the first component after the action.
It will be helpful if you anyone could throw some advice so that I can make the flow smooth.

P.S. Those components are working as expected in normal template. They behave weird when on Dialog Modal!

Steps to reproduce in the example above:

• Select options from the Multiselect
• Press tab
• Try from all the Multiselect Components
• Click outside Multiselect and check the behavior.

Please let me know if you need any more clarification and guide me if I'm wrong.

TIA

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

In #1432 we made some improvements on how we handle the Tab Lock. Instead of intercepting the keydown event and managing focus ourselves, we now let the browser do all the work so the Tab should work as expected now.

... the focus is always changed to body

If I move the multiselect component outside of the Dialog, then this also happens that the focus is moved to the body after you click on an item. This means that this is not a Headless UI bug, but sounds like a bug in the multiselect component itself.

Hope this helps!