fix(select): Fix undesired scrolling when activating menu #795
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
jamesfan
added
bug
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
NicholasBoll
approved these changes
Jul 23, 2020
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.
Summary
Fixes an issue where activating the Labs Select menu caused the browser to scroll to the top of the page.
In #535, we modified Select to focus the menu inside of a
useLayoutEffectcall with an empty dependency array (previously, focus was being applied to the menu using Popper'sonFirstUpdate). This had the unintended consequence of causing the browser to scroll to the top of the page whenever a Select menu was activated -- we suspect focus was being applied after the menu had been rendered but before it had been positioned by Popper, thus causing the browser to scroll to the top of the page where the menu is originally positioned prior to being moved by Popper.As an immediate fix, I've reverted to the previous method of focusing the menu using
onFirstUpdate. The long-term solution to this issue (and other similar timing issues) may involve creating a programmatic focus function to handle these issues in a more centralized fashion.I've also added a Cypress test to protect against this regression in the future.