fix: ensure nested submenu is aligned properly (#265)

Author: tt-hong

src/vaadin-context-menu.html

@@ -614,7 +614,7 @@
           const {xMax, yMax, left, top, width} = overlay.getBoundaries();
           // Reuse saved x and y event values, in order to this method be used async
           // in the `vaadin-overlay-change` which guarantees that overlay is ready
-          const x = this.__x || left;
+          let x = this.__x || left;
           const y = this.__y || top;
 
           // Select one overlay corner and move to the event x/y position.
@@ -625,11 +625,11 @@
           // Align to the parent menu overlay, if any.
           const parent = overlay.parentOverlay;
           let alignedToParent = false;
+          let parentContentRect;
           if (parent) {
-            const parentContentRect = parent.$.overlay.getBoundingClientRect();
+            parentContentRect = parent.$.overlay.getBoundingClientRect();
             if (parent.hasAttribute('right-aligned')) {
               const parentStyle = getComputedStyle(parent);
-
               const getPadding = (el, direction) => {
                 return parseFloat(getComputedStyle(el.$.content)['padding' + direction]);
               };
@@ -639,16 +639,29 @@
               // Preserve right-aligned, if possible.
               if ((wdthVport - (right - padding)) > width) {
                 overlay.setAttribute('right-aligned', '');
-                style.right = right - padding + 'px';
+                style.right = right + 'px';
                 alignedToParent = true;
               }
+            } else if (x < parentContentRect.x) {
+              // Check if sub menu opens on the left side and the parent menu is not right aligned.
+              // If so, use actual width of the submenu content instead of the parent menu content.
+              x = x - (width - parentContentRect.width);
             }
           }
 
           if (!alignedToParent) {
-            if (x < wdthVport / 2 || x < xMax) {
+            // Sub-menu is displayed in the right side of root menu
+            if ((x < wdthVport / 2 || x < xMax) && !parent) {
               style.left = x + 'px';
-            } else {
+            } else if ((parent && (wdthVport - parentContentRect.width - parentContentRect.left
+              >= parentContentRect.width))) { // Sub-menu is displayed in the right side of root menu If it is nested menu
+              style.left = parentContentRect.left + parentContentRect.width + 'px';
+            } else if (parent) { // Sub-menu is displayed in the left side of root menu If it is nested menu
+              style.right = 'auto';
+              style.left = Math.max(overlay.getBoundingClientRect().left,
+                parentContentRect.left - overlay.getBoundingClientRect().width) + 'px';
+              overlay.setAttribute('right-aligned', '');
+            } else { // Sub-menu is displayed in the left side of root menu
               style.right = Math.max(0, (wdthVport - x)) + 'px';
               overlay.setAttribute('right-aligned', '');
             }

test/items.html

@@ -123,7 +123,7 @@
             open(menuComponents()[0]);
             rootItemRect = menuComponents()[0].getBoundingClientRect();
             const subItemRect = menuComponents(subMenu)[0].getBoundingClientRect();
-            expect(subItemRect.right).to.be.below(rootItemRect.left + rootItemRect.width / 2);
+            expect(subItemRect.right).to.be.below(rootItemRect.left);
           });
 
           it('should open the subMenu on the top if root menu is bottom-aligned', done => {
@@ -151,13 +151,12 @@
             rootOverlay.style.removeProperty('left');
             rootOverlay.style.right = rootItemRect.width + 'px';
             rootOverlay.setAttribute('right-aligned', '');
-            const padding = parseFloat(getComputedStyle(rootOverlay.$.content).paddingLeft) * 2;
             open(rootItem);
             await nextRender(subMenu);
             expect(subMenu.$.overlay.hasAttribute('right-aligned')).to.be.true;
             const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
             const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
-            expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left + padding, 1);
+            expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left, 2);
           });
 
           it('should open the second subMenu on the right again if not enough space', async() => {
@@ -180,7 +179,7 @@
             expect(subMenu.$.overlay.hasAttribute('right-aligned')).to.be.true;
             const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
             const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
-            expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left + padding, 1);
+            expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left, 1);
 
             /* second sub-menu left-aligned */
             const nestedItem = menuComponents(subMenu)[2];
@@ -191,7 +190,7 @@
             const subMenu2 = getSubMenu(subMenu);
             expect(subMenu2.$.overlay.hasAttribute('right-aligned')).to.be.false;
             const subMenu2Rect = subMenu2.$.overlay.$.content.getBoundingClientRect();
-            expect(subMenu2Rect.left).to.be.closeTo(nestedItemRect.right, 1);
+            expect(subMenu2Rect.left).to.be.closeTo(nestedItemRect.right + padding / 2, 1);
           });
         }