fix(menu): fix for sub menu positioning

carbon-design-system · Dec 11, 2021 · d576774 · d576774
1 parent 83f414f
commit d576774
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/react/src/components/Menu/Menu.js b/packages/react/src/components/Menu/Menu.js
@@ -192,15 +192,16 @@ const Menu = function Menu({
     const elementDimensions = [elementRect.width, elementRect.height];
     const targetBoundaries = getTargetBoundaries();
     const containerBoundaries = getContainerBoundaries();
-
     const {
       position: correctedPosition,
       direction: correctedDirection,
     } = getPosition(
       elementDimensions,
       targetBoundaries,
       containerBoundaries,
-      preferredDirection
+      preferredDirection,
+      isRootMenu,
+      rootRef.current
     );
 
     setDirection(correctedDirection);

diff --git a/packages/react/src/components/Menu/_utils.js b/packages/react/src/components/Menu/_utils.js
@@ -66,6 +66,18 @@ export function getParentNode(node) {
   return null;
 }
 
+export function getSubMenuOffset(node) {
+  if (node) {
+    const nodeStyles = getComputedStyle(node);
+    const spacings =
+      parseInt(nodeStyles.paddingTop) + parseInt(nodeStyles.paddingBottom); // styles always in px, convert to number
+    const elementHeight = node.firstElementChild.offsetHeight;
+    return elementHeight + spacings || 0;
+  }
+
+  return 0;
+}
+
 export function getParentMenu(el) {
   if (el) {
     const parentMenu = el.parentNode.closest(`ul.${prefix}--menu`);
@@ -135,7 +147,9 @@ export function getPosition(
   elementDimensions,
   targetBoundaries,
   containerBoundaries,
-  preferredDirection = 1
+  preferredDirection = 1,
+  isRootLevel,
+  element
 ) {
   const position = [0, 0];
   let direction = preferredDirection;
@@ -171,6 +185,11 @@ export function getPosition(
   );
   if (!yFits) {
     position[1] = targetBoundaries[1] - elementDimensions[1];
+    if (!isRootLevel && element) {
+      // if sub-menu and not root level, consider offset
+      const diff = getSubMenuOffset(element);
+      position[1] += diff;
+    }
   }
 
   return {