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

Detect outside clicks from within <iframe> elements #1552

Merged
merged 3 commits into from
Jun 3, 2022

Conversation

thecrypticace
Copy link
Contributor

When a page has a component like <Menu> and and <iframe> on the page you could click inside the iframe. These click events are not delivered to the Window that contains the iframe so menus, dialogs, etc will not close. However, when clicking or focusing anything inside the iframe the Window receives the blur event and document.activeElement changes to the iframe itself. We can use this to detect a click or change in focus targeted at an iframe. We're also sure to scope this so if you have an iframe inside your Menu, Listbox, etc… that it doesn't close.

Fixes #707

@vercel
Copy link

vercel bot commented Jun 3, 2022

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

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Jun 3, 2022 at 9:23PM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Jun 3, 2022 at 9:23PM (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.

[Bug]: Cannot close menu/dropdown by clicking iframe
1 participant