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 cancelling transitions due to focus trap #1664

Merged
merged 2 commits into from
Jul 12, 2022
Merged

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Jul 12, 2022

This PR fixes an issue where the focus trap cancelled transitions. This causes issues when using a
transition for the Dialog component.

Fixes: #1655
Fixes: #1607

Whenever you focus an element mid transition, the browser will abrublty
stop/cancel the transition and it will do anything it can to focus the
element.

This has a very annoying side effect that this causes very abrubt
transitions (instant) in some browsers.

To fix this, we used to use `el.focus({ preventScroll: true })` which
works in Safari and it used to work in Chrome / Firefox, but there are
probably other variables that we have to keep in mind here (didn't
figure out _why_ this used to work and not anymore).

That said, instead of trying to fight the browser, we will now wait an
animation frame before even trying to focus any elements.
@vercel
Copy link

vercel bot commented Jul 12, 2022

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

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Jul 12, 2022 at 11:48AM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Jul 12, 2022 at 11:48AM (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
1 participant