Focus outline out of sync when <Tab> contains a <Dialog>

[martenbjork]

What package within Headless UI are you using?

@headlessui/react 🥰

What version of that package are you using?

1.7.13

What browser are you using?

Chrome 111.0.5563.146

Reproduction URL

https://codesandbox.io/s/95yvmg

Describe your issue

When a <Tab.Panel> contains a <Dialog> the focus order appears to break.

Steps to reproduce:

• In the demo linked above, click the first tab
• Cycle through the tabs using the right-arrow key
• Tab 2 contains a <Dialog>
• Press the right-arrow again. Tab number 3 is rendered, but focus remains on <Tab> number 2. If you press right-arrow again, focus catches up and moves to the correct tab.

tab-focus.mov

[milhamm]

I notice this also. I think since the Dialog component has a FocusTrap component under the hood that keeps track of the focused element.

While I do think this issue should be fixed, you can try a workaround by conditionally rendering the Dialog component only when the isOpen state is true.

Example: https://codesandbox.io/s/happy-dhawan-4opgbq

[RobinMalfait]

Hey, thank you for this bug report! 🙏

There was a bug in the underlying FocusTrap component that was partially activated and tried to restore the focus to the last known focused element even though the it shouldn't have been enabled in the first place.

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

You can already try it using:

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

[martenbjork]

Aces, thanks a bunch, Robin! Excited to see this fixed! 🙌

Thanks @milhamm for your solution as well!