Fix DropdownMenu positioning issue

[CarlosCortizasCT]

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: right
• menuHorizontalConstraint: auto

In 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 the menuHorizontalConstraint 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 CSS right property (instead of always using left) 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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 10, 2024 11:45am

[changeset-bot]

🦋 Changeset detected

Latest commit: 4e143cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 96 packages

Name	Type
@commercetools-uikit/dropdown-menu	Patch
@commercetools-uikit/data-table-manager	Patch
@commercetools-frontend/ui-kit	Patch
@commercetools-uikit/design-system	Patch
@commercetools-uikit/calendar-time-utils	Patch
@commercetools-uikit/calendar-utils	Patch
@commercetools-uikit/hooks	Patch
@commercetools-uikit/i18n	Patch
@commercetools-uikit/localized-utils	Patch
@commercetools-uikit/utils	Patch
@commercetools-uikit/accessible-hidden	Patch
@commercetools-uikit/avatar	Patch
@commercetools-uikit/card	Patch
@commercetools-uikit/collapsible-motion	Patch
@commercetools-uikit/collapsible-panel	Patch
@commercetools-uikit/collapsible	Patch
@commercetools-uikit/constraints	Patch
@commercetools-uikit/data-table	Patch
@commercetools-uikit/field-errors	Patch
@commercetools-uikit/field-label	Patch
@commercetools-uikit/field-warnings	Patch
@commercetools-uikit/grid	Patch
@commercetools-uikit/icons	Patch
@commercetools-uikit/label	Patch
@commercetools-uikit/link	Patch
@commercetools-uikit/loading-spinner	Patch
@commercetools-uikit/messages	Patch
@commercetools-uikit/notifications	Patch
@commercetools-uikit/pagination	Patch
@commercetools-uikit/primary-action-dropdown	Patch
@commercetools-uikit/progress-bar	Patch
@commercetools-uikit/stamp	Patch
@commercetools-uikit/tag	Patch
@commercetools-uikit/text	Patch
@commercetools-uikit/tooltip	Patch
@commercetools-uikit/view-switcher	Patch
@commercetools-uikit/accessible-button	Patch
@commercetools-uikit/flat-button	Patch
@commercetools-uikit/icon-button	Patch
@commercetools-uikit/link-button	Patch
@commercetools-uikit/primary-button	Patch
@commercetools-uikit/secondary-button	Patch
@commercetools-uikit/secondary-icon-button	Patch
@commercetools-uikit/async-creatable-select-field	Patch
@commercetools-uikit/async-select-field	Patch
@commercetools-uikit/creatable-select-field	Patch
@commercetools-uikit/date-field	Patch
@commercetools-uikit/date-range-field	Patch
@commercetools-uikit/date-time-field	Patch
@commercetools-uikit/localized-multiline-text-field	Patch
@commercetools-uikit/localized-text-field	Patch
@commercetools-uikit/money-field	Patch
@commercetools-uikit/multiline-text-field	Patch
@commercetools-uikit/number-field	Patch
@commercetools-uikit/password-field	Patch
@commercetools-uikit/radio-field	Patch
@commercetools-uikit/search-select-field	Patch
@commercetools-uikit/select-field	Patch
@commercetools-uikit/text-field	Patch
@commercetools-uikit/time-field	Patch
@commercetools-uikit/async-creatable-select-input	Patch
@commercetools-uikit/async-select-input	Patch
@commercetools-uikit/checkbox-input	Patch
@commercetools-uikit/creatable-select-input	Patch
@commercetools-uikit/date-input	Patch
@commercetools-uikit/date-range-input	Patch
@commercetools-uikit/date-time-input	Patch
@commercetools-uikit/input-utils	Patch
@commercetools-uikit/localized-money-input	Patch
@commercetools-uikit/localized-multiline-text-input	Patch
@commercetools-uikit/localized-rich-text-input	Patch
@commercetools-uikit/localized-text-input	Patch
@commercetools-uikit/money-input	Patch
@commercetools-uikit/multiline-text-input	Patch
@commercetools-uikit/number-input	Patch
@commercetools-uikit/password-input	Patch
@commercetools-uikit/radio-input	Patch
@commercetools-uikit/rich-text-input	Patch
@commercetools-uikit/rich-text-utils	Patch
@commercetools-uikit/search-select-input	Patch
@commercetools-uikit/search-text-input	Patch
@commercetools-uikit/select-input	Patch
@commercetools-uikit/select-utils	Patch
@commercetools-uikit/selectable-search-input	Patch
@commercetools-uikit/text-input	Patch
@commercetools-uikit/time-input	Patch
@commercetools-uikit/toggle-input	Patch
@commercetools-uikit/spacings-inline	Patch
@commercetools-uikit/spacings-inset-squish	Patch
@commercetools-uikit/spacings-inset	Patch
@commercetools-uikit/spacings-stack	Patch
@commercetools-uikit/buttons	Patch
@commercetools-uikit/fields	Patch
@commercetools-uikit/inputs	Patch
@commercetools-uikit/spacings	Patch
visual-testing-app	Patch

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

[kterry1]

Looks great! Thanks for doing this so fast!

[kark]

Thanks Carlos 🙌

[ddouglasz]

Thank you 🙌🏽