fix: observe parent resize to detect overflow (#3824) (#3836)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · May 12, 2022 · febbbf7 · febbbf7
1 parent 0360e7d
commit febbbf7
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 0 deletions.
diff --git a/packages/menu-bar/src/vaadin-menu-bar-buttons-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-buttons-mixin.js
@@ -28,6 +28,16 @@ export const ButtonsMixin = (superClass) =>
       return ['_menuItemsChanged(items, items.splices)'];
     }
 
+    /**
+     * Override getter from `ResizeMixin` to observe parent.
+     *
+     * @protected
+     * @override
+     */
+    get _observeParent() {
+      return true;
+    }
+
     /** @protected */
     ready() {
       super.ready();

diff --git a/packages/menu-bar/test/menu-bar.test.js b/packages/menu-bar/test/menu-bar.test.js
@@ -513,6 +513,72 @@ describe('responsive behaviour in container', () => {
   });
 });
 
+describe('parent resize', () => {
+  let container, text, menu, buttons;
+
+  beforeEach(() => {
+    container = fixtureSync('<div style="display: flex; max-width: 300px"></div>');
+    text = document.createElement('div');
+    text.textContent = 'Sibling';
+    menu = document.createElement('vaadin-menu-bar');
+    menu.items = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }, { text: 'Item 4' }];
+    menu.style.minWidth = '100px';
+  });
+
+  describe('container', () => {
+    beforeEach(async () => {
+      container.append(text, menu);
+      await onceResized(menu);
+      buttons = menu._buttons;
+    });
+
+    it('should show buttons when container width increases and menu-bar width stays the same', async () => {
+      assertHidden(buttons[2]);
+      assertHidden(buttons[3]);
+
+      container.style.maxWidth = '400px';
+      await onceResized(menu);
+
+      assertVisible(buttons[2]);
+      assertVisible(buttons[3]);
+    });
+
+    it('should show buttons after attaching another container and increasing its width', async () => {
+      const other = document.createElement('div');
+      other.style.display = 'flex';
+      other.style.maxWidth = '300px';
+      container.parentNode.appendChild(other);
+
+      other.append(text, menu);
+      other.style.maxWidth = '400px';
+      await onceResized(menu);
+
+      assertVisible(buttons[2]);
+      assertVisible(buttons[3]);
+    });
+  });
+
+  describe('shadow host', () => {
+    beforeEach(async () => {
+      container.attachShadow({ mode: 'open' });
+      container.shadowRoot.append(text, menu);
+      await onceResized(menu);
+      buttons = menu._buttons;
+    });
+
+    it('should show buttons when shadow host width increases and menu-bar width stays the same', async () => {
+      assertHidden(buttons[2]);
+      assertHidden(buttons[3]);
+
+      container.style.maxWidth = '400px';
+      await onceResized(menu);
+
+      assertVisible(buttons[2]);
+      assertVisible(buttons[3]);
+    });
+  });
+});
+
 describe('item components', () => {
   let menu, buttons, overflow;