diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
index f5cbc005ff34..d30f100de112 100644
--- a/packages/main/src/Menu.ts
+++ b/packages/main/src/Menu.ts
@@ -56,6 +56,11 @@ type MenuItemClickEventDetail = {
type MenuBeforeOpenEventDetail = { item?: MenuItem };
type MenuBeforeCloseEventDetail = { escPressed: boolean };
+type MenuItemFocusEventDetail = {
+ ref: HTMLElement,
+ item: MenuItem,
+};
+
type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem };
/**
@@ -184,6 +189,32 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem };
* @since 1.10.0
*/
@event("after-close")
+
+/**
+ * Fired when a menu item receives focus.
+ *
+ * @public
+ * @param { HTMLElement } ref The currently focused element representing a ui5-menu-item
.
+ * @param { HTMLElement } item The ui5-menu-item
represented by the focused element.
+ * @since 1.23.1
+ */
+@event("item-focus", {
+ detail: {
+ /**
+ * @public
+ */
+ ref: {
+ type: HTMLElement,
+ },
+ /**
+ * @public
+ */
+ item: {
+ type: HTMLElement,
+ },
+ },
+})
+
class Menu extends UI5Element {
/**
* Defines the header text of the menu (displayed on mobile).
@@ -539,7 +570,7 @@ class Menu extends UI5Element {
: (target.getRootNode() as ShadowRoot).host as MenuListItem;
const item = menuListItem.associatedItem as MenuItem;
const mainMenu = this._findMainMenu(item);
- mainMenu?.fireEvent("item-focus", { ref: menuListItem, item });
+ mainMenu?.fireEvent("item-focus", { ref: menuListItem, item });
}
_startOpenTimeout(item: MenuItem, opener: OpenerStandardListItem) {
@@ -712,4 +743,5 @@ export type {
MenuItemClickEventDetail,
MenuBeforeCloseEventDetail,
MenuBeforeOpenEventDetail,
+ MenuItemFocusEventDetail,
};