Fix incorrect scrolling to the bottom when opening a Dialog
#1716
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
This will render the component as-is without the wrapper.
This will delay the initial focus and makes it consistent between React and Vue. Some explanation from within the code why this is happening: Delaying the focus to the next microtask ensures that a few conditions are true: - The container is rendered - Transitions could be started If we don't do this, then focusing an element will immediately cancel any transitions. This is not ideal because transitions will look broken. There is an additional issue with doing this immediately. The FocusTrap is used inside a Dialog, the Dialog is rendered inside of a Portal and the Portal is rendered at the end of the `document.body`. This means that the moment we call focus, the browser immediately tries to focus the element, which will still be at the bodem resulting in the page to scroll down. Delaying this will prevent the page to scroll down entirely.
Now that we are triggering the initial focus inside a `queueMicroTask` we have to make sure that our tests wait a frame so that the micro task could run, otherwise we will have incorrect results. Also make the implementation similar in React and Vue
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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 page is scrolled down before opening a Dialog.
This is because we tried to focus the first focusable element within the dialog before any
transition happens or whatsoever, this means that technically the dialog is still at the very bottom
of the page (because we render it at the end of the
document.bodyvia a Portal).Focusing the element causes the browser to scroll the page down.
With the
queueMicroTaskwe can delay that just enough to let the browser do its job.Fixes: #1708