fix: postpone menu-bar initial render to prevent re-layout

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');

packages/menu-bar/src/vaadin-menu-bar-mixin.js

@@ -262,7 +262,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;
+      });
     }
 
     /**
@@ -468,6 +473,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);