New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix DropdownMenu
positioning issue
#2812
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 4e143cc The changes in this PR will be included in the next version bump. This PR includes changesets to release 96 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! Thanks for doing this so fast!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks Carlos 🙌
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you 🙌🏽
* fix(dropdown-menu): fix an issue with dropdown positioning * chore: changeset added
Summary
There's been found an issue with the width and positioning of the
DropdownMenu
floating panel element.closes #2813
Description
The issue can be reproduced when using this properties values combination:
menuPosition
: rightmenuHorizontalConstraint
: autoIn this situation, the floating menu was not correctly aligned with the triggering element and also was narrower that expected.
The issue seems to be related with the rendering and painting synchronization: although we use the
useLayoutEffect
hook to perform the calculation about the width and positioning of the floating element, the actual read width of the menu (determined by its contents because of the auto value for themenuHorizontalConstraint
property) was not accurate.We were using this width measurement in order to calculate the
left
positioning value of the floating menu so it didn't work well.We've change the way we position the floating menu when receiving the right value for the
menuPosition
property to use the CSSright
property (instead of always usingleft
) so we don't actually need its width to correctly positioning it.BEFORE
Screen.Recording.2024-05-10.at.13.43.58.mov
AFTER
Screen.Recording.2024-05-10.at.13.48.53.mov