Ensure page doesn't scroll down when pressing Escape to close the Dialog component
#3218
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This was referenced Jul 13, 2024
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 ensures that the page doesn't scroll down when pressing
Escapeto close an openDialogcomponent.This only happens in Safari, and if the
document.activeElementis an<input>for example. It also only happens when pressingEscape, not when clicking outside of theDialogcomponent.The reason why is a bit confusing but it does make sense:
Whenever the the currently focused element is moved on the page, Safari will try to keep the
document.activeElementin view. This means that when you pressEscapethat the<input>element is still focused, but since theDialogcloses, the<input>is still rendered in a portal at the end of the page. Because it's rendered there, Safari will try and keep it in view, which causes the page to scroll down.It doesn't happen when clicking outside of the
Dialogcomponent because thedocument.activeElementwill be the newly focused element, which is typically the<body>element.To solve this, we will always call
document.activeElement.blur()(which is also implicitly done when clicking outside of theDialogcomponent) when we pressEscape.Now, the
<input>element is no longer focused, and Safari won't try to keep it in view, which prevents the page from scrolling down.