diff --git a/.changeset/kind-countries-yell.md b/.changeset/kind-countries-yell.md new file mode 100644 index 0000000000..1d6d1652b8 --- /dev/null +++ b/.changeset/kind-countries-yell.md @@ -0,0 +1,11 @@ +--- +'@commercetools-uikit/dropdown-menu': patch +'@commercetools-uikit/data-table-manager': patch +--- + +We fixed an issue with the `DropdownMenu` component when using these values: + +* `menuPosition`: right +* `menuHorizontalConstraint`: auto + +In that situation, the width and positioning of the floating menu was not correctly calculated. diff --git a/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx b/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx index 3cb3da6e82..3972c0a012 100644 --- a/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx +++ b/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx @@ -52,19 +52,19 @@ function DropdownBaseMenu(props: TDropdownBaseMenuProps) { if (props.isOpen && props.triggerElementRef.current && menuRef.current) { const triggerElementCoordinates = props.triggerElementRef.current.getBoundingClientRect(); - const menuElementCoordinates = menuRef.current.getBoundingClientRect(); menuRef.current.style.top = `${ triggerElementCoordinates.top + triggerElementCoordinates.height }px`; - menuRef.current.style.left = - props.menuPosition === 'left' - ? `${triggerElementCoordinates.left}px` - : `${ - triggerElementCoordinates.left + - triggerElementCoordinates.width - - menuElementCoordinates.width - }px`; + if (props.menuPosition === 'left') { + menuRef.current.style.left = `${triggerElementCoordinates.left}px`; + menuRef.current.style.removeProperty('right'); + } else { + menuRef.current.style.right = `${ + window.innerWidth - triggerElementCoordinates.right + }px`; + menuRef.current.style.removeProperty('left'); + } menuRef.current.style.maxHeight = props.menuMaxHeight ? `${props.menuMaxHeight}px` : `calc(${