You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
The text was updated successfully, but these errors were encountered:
martenbjork
changed the title
Focus outline gets confused when <Tab> contains a <Dialog>
Focus outline out of sync when <Tab> contains a <Dialog>
Mar 31, 2023
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.
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.
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:
<Dialog>
<Tab>
number 2. If you press right-arrow again, focus catches up and moves to the correct tab.tab-focus.mov
The text was updated successfully, but these errors were encountered: