(bug) [React]: Focus trap doesn't keep focus when tabbing to element with tabIndex outside of the Dialog

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

Chrome

Reproduction URL

Minimum reproducible example on CodeSandbox

Describe your issue

The Transition component loses the focus trap when elements of Dialog contain a tabIndex.

Go to the CodeSandbox, click Open Me, tab through the buttons and see that I'm another button gains focus. This issue is not present if tabIndex is not present. If this is expected behavior, it seems to break the ability to define which elements are tabbed in order.

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

Just for future reference, this doesn't look like a Transition related issue but a Dialog/FocusTrap issue because if you remove the Transition altogether the issue is still there. Updated CodeSandbox: https://codesandbox.io/s/jolly-scott-zofw49?file=/src/App.js

Hey!

Sorry that this took a while... but this should be fixed by #2093, and will be available in the next release.

You can already try it (in a few minutes) using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.