From b46746e1f29c21d8537edc3098a36be0de2f1a3f Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Wed, 10 Jul 2024 11:53:37 +0300
Subject: [PATCH] fix: wait for updateComplete before setting positionTarget
 (#7524)

---
 packages/menu-bar/src/vaadin-menu-bar-mixin.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
index e87ecaafc0..76154b503b 100644
--- a/packages/menu-bar/src/vaadin-menu-bar-mixin.js
+++ b/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 },
       );