fix: postpone menu-bar initial render to prevent re-layout (#7312)

vaadin · Apr 11, 2024 · 184e277 · 184e277
1 parent f86e0ec
commit 184e277
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/integration/tests/component-relayout-page.test.js b/integration/tests/component-relayout-page.test.js
@@ -1,8 +1,17 @@
 import { expect } from '@esm-bundle/chai';
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { ContextMenu } from '@vaadin/context-menu';
-
-[{ tagName: ContextMenu.is }].forEach(({ tagName }) => {
+import { MenuBar } from '@vaadin/menu-bar';
+
+[
+  { tagName: ContextMenu.is },
+  {
+    tagName: MenuBar.is,
+    callback: (el) => {
+      el.items = [{ text: 'Item' }];
+    },
+  },
+].forEach(({ tagName, callback }) => {
   describe(`${tagName} re-layout`, () => {
     let wrapper;
 
@@ -16,6 +25,9 @@ import { ContextMenu } from '@vaadin/context-menu';
       }
 
       wrapper.appendChild(document.createElement(tagName));
+      if (callback) {
+        callback(wrapper.firstElementChild);
+      }
 
       for (let i = 0; i < 100; i++) {
         const btn = document.createElement('button');

diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
@@ -251,7 +251,12 @@ export const MenuBarMixin = (superClass) =>
       container.addEventListener('click', this.__onButtonClick.bind(this));
       container.addEventListener('mouseover', (e) => this._onMouseOver(e));
 
-      this._container = container;
+      // Delay setting container to avoid rendering buttons immediately,
+      // which would also trigger detecting overflow and force re-layout
+      // See https://github.com/vaadin/web-components/issues/7271
+      queueMicrotask(() => {
+        this._container = container;
+      });
     }
 
     /**
@@ -444,6 +449,10 @@ export const MenuBarMixin = (superClass) =>
 
     /** @private */
     __detectOverflow() {
+      if (!this._container) {
+        return;
+      }
+
       const overflow = this._overflow;
       const buttons = this._buttons.filter((btn) => btn !== overflow);
       const oldOverflowCount = this.__getOverflowCount(overflow);

diff --git a/packages/menu-bar/test/visual/lumo/menu-bar.test.js b/packages/menu-bar/test/visual/lumo/menu-bar.test.js
@@ -19,11 +19,13 @@ describe('menu-bar', () => {
       });
 
       describe('basic', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [
             { text: 'Home' },
             {
@@ -47,11 +49,13 @@ describe('menu-bar', () => {
       });
 
       describe('single button', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [{ text: 'Actions' }];
         });
 
@@ -77,11 +81,13 @@ describe('menu-bar', () => {
           return item;
         }
 
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [
             { component: 'u', text: 'Home' },
             {

diff --git a/packages/menu-bar/test/visual/material/menu-bar.test.js b/packages/menu-bar/test/visual/material/menu-bar.test.js
@@ -19,11 +19,13 @@ describe('menu-bar', () => {
       });
 
       describe('basic', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [
             { text: 'Home' },
             {
@@ -47,11 +49,13 @@ describe('menu-bar', () => {
       });
 
       describe('single button', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [{ text: 'Actions' }];
           element.setAttribute('theme', 'outlined');
         });
@@ -78,11 +82,13 @@ describe('menu-bar', () => {
           return item;
         }
 
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [
             { component: 'u', text: 'Home' },
             {