[material-ui][Popper] Fix scroll jump when popperOptions change#48089
Closed
AyushCoder9 wants to merge 1 commit into
Closed
[material-ui][Popper] Fix scroll jump when popperOptions change#48089AyushCoder9 wants to merge 1 commit into
AyushCoder9 wants to merge 1 commit into
Conversation
Netlify deploy previewhttps://deploy-preview-48089--material-ui.netlify.app/ Bundle size report
|
AyushCoder9
force-pushed
the
fix/issue-48087-datepicker-scroll-jump
branch
from
a4f642f to
6cf4dc6
Compare
AyushCoder9
force-pushed
the
fix/issue-48087-datepicker-scroll-jump
branch
from
6cf4dc6 to
81fc6f2
Compare
Author
|
@jarib Kindly check this PR |
zannager
added
the
component: Popper
Member
Member
|
Apologies I missed this and opened #48121 Appreciate the effort 🙏 |
mj12albert
reviewed
Mar 30, 2026
Comment on lines
+212
to
+215
| // Restore the fixed positioning to prevent scroll jump before next Popper creation | ||
| tooltipNode.style.position = 'fixed'; | ||
| tooltipNode.style.top = '0'; | ||
| tooltipNode.style.left = '0'; |
Member
There was a problem hiding this comment.
The actual values should be read before .destroy() to restore to
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
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.
Fixes mui/mui-x#21839
What
Fixes a bug where providing a dynamic
popperOptions(e.g., an inline object) to Popper or DatePicker causes the page to automatically scroll to the bottom when an interior component is auto-focused.Why
Issue mui/mui-x#21839 reports that when
popperOptionsis passed to a controlled DatePicker withviews={['month', 'year']}, selecting a month causes the page to scroll down.When
popperOptionschanges its reference (like passing an inline{}object on render), BasePopper.tsx’suseEnhancedEffectdestroys and creates thepopper.jsinstance.popper.destroy()synchronously clears the inline CSSposition,top, andleftproperties applied to the DOM element by@popperjs/corebefore the next instance is created. This temporarily causes the element to revert toposition: static. Since the Popper is typically mounted in a Portal at the end of thedocument.body, the static element drops to the absolute bottom of the HTML page flow. When the Year view subsequently receives auto-focus, the browser scrolls down to bring the newly-focused element into view, causing the jarring visual jump.How
In packages/mui-material/src/Popper/BasePopper.tsx, I updated the cleanup phase of the
useEnhancedEffect. Directly afterpopper.destroy(), we manually restore the original inlineposition: fixedalong withtop: 0andleft: 0.This bridges the small gap right after destruction, ensuring the Portal element remains fixed and detached from regular document flow, completely avoiding bottom-page layouts and subsequent jumping on autofocus.
I also added a simple unit test ensuring
position: staticis not temporarily set.