Prevent cancelling transitions due to focus trap #1664
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This was referenced Jul 12, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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