fix: ensure consistent right alignment for nested menus

vaadin · Mar 25, 2019 · b47e4d5 · b47e4d5
1 parent 579701d
commit b47e4d5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/vaadin-context-menu.html b/src/vaadin-context-menu.html
@@ -566,7 +566,14 @@
           // Then set styling attrs for flex-aligning the content appropriatelly.
           const wdthVport = document.documentElement.clientWidth;
           const hghtVport = document.documentElement.clientHeight;
-          if (x < wdthVport / 2 || x < xMax) {
+
+          const parent = overlay.parentOverlay;
+          if (parent && parent.hasAttribute('right-aligned')) {
+            const parentStyle = getComputedStyle(parent);
+            const parentContentRect = parent.$.overlay.getBoundingClientRect();
+            overlay.setAttribute('right-aligned', '');
+            style.right = parseFloat(parentStyle.right) + parentContentRect.width + 'px';
+          } else if (x < wdthVport / 2 || x < xMax) {
             style.left = x + 'px';
           } else {
             style.right = Math.max(0, (wdthVport - x)) + 'px';

diff --git a/test/items.html b/test/items.html
@@ -128,6 +128,23 @@
               done();
             });
           });
+
+          it('should open the subMenu on the left if root menu is right-aligned', done => {
+            subMenu.close();
+            const rootItemRect = menuComponents()[0].getBoundingClientRect();
+            rootMenu.$.overlay.style.removeProperty('left');
+            rootMenu.$.overlay.style.right = rootItemRect.width + 'px';
+            rootMenu.$.overlay.setAttribute('right-aligned', '');
+            open(menuComponents()[0]);
+
+            Polymer.RenderStatus.afterNextRender(subMenu, () => {
+              expect(subMenu.$.overlay.hasAttribute('right-aligned')).to.be.true;
+              const rootMenuRect = rootMenu.$.overlay.$.content.getBoundingClientRect();
+              const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
+              expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left, 1);
+              done();
+            });
+          });
         }
 
         it('should clean up the old content on reopen', () => {