From c0c90b2c9a1d3b2f92b1b8b73832430377499870 Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:02:47 +0300
Subject: [PATCH] fix(ui5-menu): fix focus steal of ui5-wizard in mozilla
 (#9845)

Previously in Mozilla Firefox browser the ui5-menu was 'stealing' the focus of the ui5-wizard resulting in scroll back through the steps.
The problem occured when the ui5-wizard contained a menu, with or without ui5-menu-item, and sub-menus. The reason was due to some timing issue, when executing the _createSubMenu() --then--> _openItemSubMenu() methods in the ui5-menu.
---
 packages/main/src/Menu.hbs | 12 +++++++-----
 packages/main/src/Menu.ts  | 12 ++++++++----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/main/src/Menu.hbs b/packages/main/src/Menu.hbs
index 7487cd6c42fc..e844f1734646 100644
--- a/packages/main/src/Menu.hbs
+++ b/packages/main/src/Menu.hbs
@@ -90,9 +90,11 @@
 		</ui5-busy-indicator>
 	{{/if}}
 	</div>
-</ui5-responsive-popover>
 
-<div
-	class="ui5-menu-submenus"
->
-</div>
\ No newline at end of file
+	{{#if menuHasSubMenus}}
+	<div
+		class="ui5-menu-submenus"
+	>
+	</div>
+{{/if}}
+</ui5-responsive-popover>
\ No newline at end of file
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
index fe404b74439a..64042d5b8a1c 100644
--- a/packages/main/src/Menu.ts
+++ b/packages/main/src/Menu.ts
@@ -325,6 +325,10 @@ class Menu extends UI5Element {
 		Menu.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
+	get menuHasSubMenus() {
+		return !!this.items.filter(item => item.hasSubmenu).length;
+	}
+
 	get itemsWithChildren() {
 		return !!this._currentItems.filter(item => item.item.items.length).length;
 	}
@@ -513,12 +517,12 @@ class Menu extends UI5Element {
 		return fragment;
 	}
 
-	_openItemSubMenu(item: MenuItem, opener: HTMLElement) {
+	async _openItemSubMenu(item: MenuItem, opener: HTMLElement) {
 		const mainMenu = this._findMainMenu(item);
 		mainMenu?.fireEvent<MenuBeforeOpenEventDetail>("before-open", {
 			item,
 		}, false, false);
-		item._subMenu!.showAt(opener);
+		await item._subMenu!.showAt(opener);
 		item._preventSubMenuClose = true;
 		this._openedSubMenuItem = item;
 		this._subMenuOpenerId = opener.id;
@@ -553,7 +557,7 @@ class Menu extends UI5Element {
 		}
 	}
 
-	_prepareSubMenu(item: MenuItem, opener: HTMLElement) {
+	async _prepareSubMenu(item: MenuItem, opener: HTMLElement) {
 		const menuItem = item.parentElement ? item : (opener as OpenerStandardListItem).associatedItem;
 		const parentMenuItem = this._getParentMenuItem(menuItem);
 
@@ -564,7 +568,7 @@ class Menu extends UI5Element {
 		if (menuItem && menuItem.hasSubmenu) {
 			// create new sub-menu
 			this._createSubMenu(menuItem, opener);
-			this._openItemSubMenu(menuItem, opener);
+			await this._openItemSubMenu(menuItem, opener);
 		}
 		if (parentMenuItem) {
 			parentMenuItem._preventSubMenuClose = true;