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

Prevent scrolling when focusing a tab #2674

Merged
merged 2 commits into from Aug 17, 2023
Merged

Prevent scrolling when focusing a tab #2674

merged 2 commits into from Aug 17, 2023

Conversation

reinink
Copy link
Member

@reinink reinink commented Aug 17, 2023

This is a small change to the <Tab> component that disables scrolling when focusing a tab button. While we want to focus the tab button, I don't think we want the default browser scroll-into-view behavior, as it creates weird issues like what you see in tailwindlabs/tailwindui-issues#1467. Here's a screen recording of that issue:

Screen.Recording.2023-08-16.at.9.39.36.PM.mov

I think it's better to just preserve the existing scroll position than to try and have the browser scroll the tab button into focus. Here's what that looks like:

Screen.Recording.2023-08-16.at.9.46.27.PM.mov

@vercel
Copy link

vercel bot commented Aug 17, 2023

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

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 17, 2023 1:51am
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 17, 2023 1:51am

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.

None yet

1 participant