From f1fff9fca6fc25068fbed79c1f14cbfae52e7d2c Mon Sep 17 00:00:00 2001
From: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com>
Date: Mon, 13 May 2024 12:12:21 +0200
Subject: [PATCH] Fix `DropdownMenu` positioning issue  (#2812)

* fix(dropdown-menu): fix an issue with dropdown positioning

* chore: changeset added
---
 .changeset/kind-countries-yell.md              | 11 +++++++++++
 .../src/menu/dropdown-menu-menu.tsx            | 18 +++++++++---------
 2 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/kind-countries-yell.md

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(${