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 Popover is used inside a shadow DOM, when a user interaction (e.g. the Tab key) causes focus to move forward out of the Popover, it moves to the top of the document body instead of to the element that should come after the Popover in the tab order.
The repro linked above has specific instructions in the README, but basically, it looks like this:
<button>outside shadow DOM</button>
<component>
#shadow-root {
<Popover>
<Popover.Button>toggle</Popover.Button>
<Popover.Panel>
<button>inside the panel</button>
</Popover.Panel>
</Popover>
<button>after the popover</button>
}
</component>
When focus is on the inside the panel button and you hit Tab, it should focus after the popover; instead, focus goes to outside shadow DOM.
I believe this is because Popover calls getFocusableElements() without arguments, so it's looking for focusable elements within document.body, instead of within the shadow root where the Popover is.
The text was updated successfully, but these errors were encountered:
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v1.7.18
What browser are you using?
Brave, Firefox (both macOS)
Reproduction URL
https://github.com/oyamauchi/headlessui-bug
Describe your issue
When a Popover is used inside a shadow DOM, when a user interaction (e.g. the Tab key) causes focus to move forward out of the Popover, it moves to the top of the document body instead of to the element that should come after the Popover in the tab order.
The repro linked above has specific instructions in the README, but basically, it looks like this:
When focus is on the
inside the panel
button and you hit Tab, it should focusafter the popover
; instead, focus goes tooutside shadow DOM
.I believe this is because Popover calls
getFocusableElements()
without arguments, so it's looking for focusable elements withindocument.body
, instead of within the shadow root where the Popover is.The text was updated successfully, but these errors were encountered: