-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tabbing out of Popover inside shadow DOM focuses wrong element #2951
Comments
This was referenced Mar 30, 2024
Hello @oyamauchi, |
Same issue here at version |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: