Skip to content
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

Ensure the Popover.Panel is clickable without closing the Popover #1443

Merged
merged 2 commits into from
May 13, 2022

Conversation

RobinMalfait
Copy link
Collaborator

This PR ensures that the popover panel doesn't close if you click on a non-focusable item inside the
popover panel.

This happens if one of the parent items contains a focusable element. For example when using a
Popover inside a Tab component, the Tab.Panel has a tabIndex={0}. The click even then bubbles and
the Tab.Panel now has the focus. Since the focus is "outside" of the Popover, the Popover now
closes.

This also happens in Gatsby applications where the root Gatsby app has a tabIndex={-1} for
accessibility purposes.

Fixes: #1437

@vercel
Copy link

vercel bot commented May 13, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview May 13, 2022 at 2:03PM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview May 13, 2022 at 2:03PM (UTC)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Popover within a Tab
1 participant