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

Fix Tab incorrectly activating on focus event #1887

Merged
merged 2 commits into from Sep 30, 2022
Merged

Conversation

RobinMalfait
Copy link
Collaborator

The "change on focus" was an incorrect implementation detail that made
it a bit easier but this causes a problem as seen in #1858.

If you want to conditionally check if you want to change the tab or note
(e.g. by using window.confirm) then the focus is lost while the popup
is shown. Regardless of your choice, the browser will re-focus the Tab
therefore asking you again what you want to do.

This fixes that by only activating the tab if needed while using arrow
keys or when you click the tab (not when it is focused).

Fixes: #1858

The "change on focus" was an incorrect implementation detail that made
it a bit easier but this causes a problem as seen in #1858.

If you want to conditionally check if you want to change the tab or note
(e.g. by using `window.confirm`) then the focus is lost while the popup
is shown. Regardless of your choice, the browser will re-focus the Tab
therefore asking you *again* what you want to do.

This fixes that by only activating the tab if needed while using arrow
keys or when you click the tab (not when it is focused).
@vercel
Copy link

vercel bot commented Sep 30, 2022

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

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Sep 30, 2022 at 11:50AM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Sep 30, 2022 at 11:50AM (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.

[Vue] - Tabs not working properly when conditionally updating the selected-index prop from the change event
1 participant