fix: wait for updateComplete before setting positionTarget (#7524) (#…

…7528)

Co-authored-by: Serhii Kulykov <[email protected]>

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

@@ -878,14 +878,11 @@ export const MenuBarMixin = (superClass) =>
       subMenu.items = items;
       subMenu.listenOn = button;
       const overlay = subMenu._overlayElement;
-      // Unset old positioning to prevent flashing.
-      overlay.removeAttribute('style');
-      overlay.positionTarget = undefined;
       overlay.noVerticalOverlap = true;
 
       this._expandedButton = button;
 
-      requestAnimationFrame(() => {
+      requestAnimationFrame(async () => {
         button.dispatchEvent(
           new CustomEvent('opensubmenu', {
             detail: {
@@ -896,6 +893,14 @@ export const MenuBarMixin = (superClass) =>
         this._hideTooltip(true);
 
         this._setExpanded(button, true);
+
+        // Delay setting position target until overlay is rendered
+        // to correctly measure item content in Lit based version.
+        if (overlay.updateComplete) {
+          await overlay.updateComplete;
+        }
+
+        overlay.positionTarget = button;
       });
 
       this.style.pointerEvents = 'auto';
@@ -915,11 +920,6 @@ export const MenuBarMixin = (superClass) =>
           if (!keydown) {
             overlay.$.overlay.focus();
           }
-
-          // Delay setting position target until overlay is rendered
-          // to correctly measure item content in Lit based version.
-          overlay.positionTarget = button;
-          overlay._updatePosition();
         },
         { once: true },
       );