fix(Popper): prevented page scroll when popper opens #10725
Closed
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.
What: Closes #10511
This essentially sort of "hides" the popper element until it should be visible. It does look to resolve the original issue of the popper causing the page to scroll, but it also breaks focus management when opening a Dropdown due to how we're handling that in the components. We'd have to essentially set the setTimeout in Dropdown/Select to something other than 0 in the
handleClick
handler, or pass the same logic to focus the first item to Popper'sonShown
prop. That said, this also looks to reintroduce the visual bug where the popper content appears in the wrong position first and then adjusts to the correct position, causing a sort of "flicker" effect.As a note, one comment in the issue was about the
position: relative
styling on the Toolbar and ToolbarContent being one of the causes of the issue, and can confirm that removing that styling from both did resolve the issue. Though most likely not something we'd want to update in Core as I assume we need that relative positioning there.A simpler work around may be setting the
appendTo
on Dropdown/whatever popper element to() => document.body
manually (which will be the default behavior for Popper, Dropdown, and Select itself in v6), as that should resolve the scrolling issue as well.Additional issues: