fix(ui5-menu): focus first element after adding new items

packages/main/src/Menu.ts

@@ -1,4 +1,4 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UI5Element, { type ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -234,6 +234,13 @@ class Menu extends UI5Element {
 	@property({ converter: DOMReferenceConverter })
 	opener?: HTMLElement | string;
 
+	/**
+	 * Indicates if the menu item has a submenu.
+	 * @private
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_newItemsAdded?: boolean;
+
 	/**
 	 * Defines the items of this component.
 	 *
@@ -277,6 +284,27 @@ class Menu extends UI5Element {
 		this._menuItems.forEach(item => {
 			item._siblingsWithIcon = siblingsWithIcon;
 		});
+
+		if (this._newItemsAdded) {
+			if (this._menuItems.length > 0) {
+				const hasSelectedItem = this._menuItems.some(item => item.selected);
+
+				if (!hasSelectedItem) {
+					this._menuItems[0].focus();
+				}
+
+				if (this._menuItems[0].focused) {
+					this._newItemsAdded = false;
+				}
+			}
+		}
+	}
+
+	onInvalidation(changeInfo: ChangeInfo) {
+		// if the change is due to a new item being added, focus the first item
+		if (changeInfo.reason === "children" && changeInfo.type === "slot") {
+			this._newItemsAdded = true;
+		}
 	}
 
 	_close() {

packages/main/src/MenuItem.ts

@@ -7,6 +7,7 @@ import AriaHasPopup from "@ui5/webcomponents-base/dist/types/AriaHasPopup.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import "@ui5/webcomponents-icons/dist/nav-back.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ListItemAccessibilityAttributes } from "./ListItem.js";
 import ListItem from "./ListItem.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -166,6 +167,13 @@ class MenuItem extends ListItem implements IMenuItem {
 	@property({ type: Boolean, noAttribute: true })
 	_siblingsWithIcon = false;
 
+	/**
+	 * Indicates if the menu item has a submenu.
+	 * @private
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_newItemsAdded?: boolean;
+
 	/**
 	 * Defines the items of this component.
 	 *
@@ -259,6 +267,27 @@ class MenuItem extends ListItem implements IMenuItem {
 		this._menuItems.forEach(item => {
 			item._siblingsWithIcon = siblingsWithIcon;
 		});
+
+		if (this._newItemsAdded) {
+			if (this._menuItems.length > 0) {
+				const hasSelectedItem = this._menuItems.some(item => item.selected);
+
+				if (!hasSelectedItem) {
+					this._menuItems[0].focus();
+				}
+
+				if (this._menuItems[0].focused) {
+					this._newItemsAdded = false;
+				}
+			}
+		}
+	}
+
+	onInvalidation(changeInfo: ChangeInfo) {
+		// if the change is due to a new item being added, focus the first item
+		if (changeInfo.reason === "children" && changeInfo.type === "slot") {
+			this._newItemsAdded = true;
+		}
 	}
 
 	get _focusable() {

packages/main/test/pages/Menu.html

@@ -21,13 +21,13 @@
 		</ui5-menu-item>
 		<ui5-menu-separator></ui5-menu-separator>
 		<ui5-menu-item text="Open" icon="open-folder" accessible-name="Choose platform" loading-delay="100" loading>
-			<ui5-menu-item text="Open Locally" icon="open-folder" additional-text="Ctrl+K">
+			<!-- <ui5-menu-item text="Open Locally" icon="open-folder" additional-text="Ctrl+K">
 				<ui5-menu-item id="menuItemFromC" text="Open from C"></ui5-menu-item>
 				<ui5-menu-item id="menuItemFromD" text="Open from D"></ui5-menu-item>
 				<ui5-menu-separator></ui5-menu-separator>
 				<ui5-menu-item text="Open from E" disabled></ui5-menu-item>
 			</ui5-menu-item>
-			<ui5-menu-item text="Open from SAP Cloud" additional-text="Ctrl+L"></ui5-menu-item>
+			<ui5-menu-item text="Open from SAP Cloud" additional-text="Ctrl+L"></ui5-menu-item> -->
 		</ui5-menu-item>
 		<ui5-menu-item text="Save with very long title for a menu item text inside" icon="save">
 			<ui5-menu-item text="Save Locally" icon="save">
@@ -43,6 +43,9 @@
 		<ui5-menu-item id="menuItemExit" text="Exit" icon="journey-arrive"></ui5-menu-item>
 	</ui5-menu>
 
+	<ui5-menu id="delaymenu" loading-delay="100" loading>
+	</ui5-menu>
+
 	<ui5-title level="H5" class="header-title">Clicked menu item text</ui5-title>
 	<ui5-input id="selectionInput"></ui5-input>
 
@@ -119,6 +122,9 @@
 			<ui5-link id="detailsLink" href="https://en.wikipedia.org/wiki/Google_logo" target="_blank"></ui5-link>
 	</ui5-popover>
 
+
+	<ui5-button id="btnAddOpenerDelay">Delayed</ui5-button>
+
 	<script>
 		btnOpen.accessibilityAttributes = {
 			hasPopup: "menu",
@@ -146,6 +152,24 @@
 			menu.open = btnToggleOpen.pressed;
 		});
 
+		btnAddOpenerDelay.addEventListener("click", function() {
+			delaymenu.opener = "btnAddOpenerDelay";
+			delaymenu.open = !delaymenu.open;
+		});
+
+		delaymenu.addEventListener("ui5-before-open", function(event) {
+			setTimeout(function() {
+				delaymenu.removeAttribute("loading");
+				delaymenu.removeAttribute("loading-delay");
+				let oneNode = document.createElement("ui5-menu-item");
+				oneNode.setAttribute("text", "Open from Amazon Cloud");
+				let twoNode = document.createElement("ui5-menu-item");
+				twoNode.setAttribute("text", "Open from Google Cloud");
+				delaymenu.append(oneNode, twoNode);
+				fetched = true;
+			}, 1000);
+		});
+
 		let fetched = false;
 
 		menu.addEventListener("ui5-before-open", function(event) {