feat(ui5-menu): make the item click event cancellable (#7360)

feat(ui5-menu): make the item click event cancellable

Requirement:
- Currently the menu closes when a menu item gets selected.
- Enable users to press multiple menu items.

Fixes: #5600

Author: unazko

packages/main/CWINDOWSsystem32node_moduleschromedriverlibchromedriver

@@ -112,8 +112,10 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem };
 
 /**
  * Fired when an item is being clicked.
+ * <b>Note:</b> Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.
  *
  * @event sap.ui.webc.main.Menu#item-click
+ * @allowPreventDefault
  * @param { HTMLElement } item The currently clicked menu item.
  * @param { string } text The text of the currently clicked menu item.
  * @public
@@ -367,7 +369,8 @@ class Menu extends UI5Element {
 			const menuItem = item.item;
 			if (subMenu && subMenu.busy) {
 				subMenu.innerHTML = "";
-				this._cloneItems(menuItem, subMenu);
+				const fragment = this._clonedItemsFragment(menuItem);
+				subMenu.appendChild(fragment);
 			}
 
 			if (subMenu) {
@@ -471,16 +474,21 @@ class Menu extends UI5Element {
 		subMenu._parentMenuItem = item;
 		subMenu.busy = item.busy;
 		subMenu.busyDelay = item.busyDelay;
-		this._cloneItems(item, subMenu);
+		const fragment = this._clonedItemsFragment(item);
+		subMenu.appendChild(fragment);
 		this.staticAreaItem!.shadowRoot!.querySelector(".ui5-menu-submenus")!.appendChild(subMenu);
 		item._subMenu = subMenu;
 	}
 
-	_cloneItems(item: MenuItem, menu: Menu) {
+	_clonedItemsFragment(item: MenuItem) {
+		const fragment = document.createDocumentFragment();
+
 		for (let i = 0; i < item.items.length; ++i) {
 			const clonedItem = item.items[i].cloneNode(true);
-			menu.appendChild(clonedItem);
+			fragment.appendChild(clonedItem);
 		}
+
+		return fragment;
 	}
 
 	_openItemSubMenu(item: MenuItem, opener: HTMLElement, actionId: string) {
@@ -637,15 +645,33 @@ class Menu extends UI5Element {
 					this._parentMenuItem = undefined;
 				}
 				// fire event if the click is on top-level menu item
-				this.fireEvent<MenuItemClickEventDetail>("item-click", {
+				const prevented = !this.fireEvent<MenuItemClickEventDetail>("item-click", {
 					"item": item,
 					"text": item.text,
-				});
-				this._popover!.close();
+				}, true, false);
+
+				if (!prevented) {
+					this._popover!.close();
+				}
 			} else {
-				// find top-level menu and redirect event to it
 				const mainMenu = this._findMainMenu(item);
-				mainMenu._itemClick(e);
+				const prevented = !mainMenu.fireEvent<MenuItemClickEventDetail>("item-click", {
+					"item": item,
+					"text": item.text,
+				}, true, false);
+
+				if (!prevented) {
+					let openerMenuItem = item;
+					let parentMenu = openerMenuItem.parentElement as Menu;
+					do {
+						openerMenuItem._preventSubMenuClose = false;
+						this._closeItemSubMenu(openerMenuItem);
+						parentMenu = openerMenuItem.parentElement as Menu;
+						openerMenuItem = parentMenu._parentMenuItem as MenuItem;
+					} while (parentMenu._parentMenuItem);
+
+					mainMenu._popover!.close();
+				}
 			}
 		} else if (isPhone()) {
 			// prepares and opens sub-menu on phone
@@ -659,8 +685,6 @@ class Menu extends UI5Element {
 	_findMainMenu(item: MenuItem) {
 		let parentMenu = item.parentElement as Menu;
 		while (parentMenu._parentMenuItem) {
-			parentMenu._parentMenuItem._preventSubMenuClose = false;
-			this._closeItemSubMenu(parentMenu._parentMenuItem);
 			parentMenu = parentMenu._parentMenuItem.parentElement as Menu;
 		}
 

packages/main/src/Menu.ts

@@ -24,7 +24,7 @@
 				<ui5-menu-item text="Open from D"></ui5-menu-item>
 				<ui5-menu-item text="Open from E"></ui5-menu-item>
 			</ui5-menu-item>
-			<ui5-menu-item text="Open from 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" icon="save">
 			<ui5-menu-item text="Save Locally" icon="save">
@@ -108,22 +108,28 @@ <h3 class="header-title">Event logger</h3>
 
 		let fetched = false;
 
-		menu.addEventListener("ui5-before-open", function fetch(event) {
+		menu.addEventListener("ui5-before-open", function(event) {
 			const item = event.detail.item;
 			if (item && item.text === "Open" && !fetched) {
 				setTimeout(function() {
+					item.removeAttribute("busy");
+					item.removeAttribute("busy-delay");
 					let oneNode = document.createElement("ui5-menu-item");
-					oneNode.setAttribute("text", "One");
+					oneNode.setAttribute("text", "Open from Amazon Cloud");
 					let twoNode = document.createElement("ui5-menu-item");
-					twoNode.setAttribute("text", "Two");
+					twoNode.setAttribute("text", "Open from Google Cloud");
 					item.append(oneNode, twoNode);
 					fetched = true;
-				}, 0);
+				}, 1000);
 			}
 		});
 
 		menu.addEventListener("ui5-item-click", function(event) {
-			selectionInput.value = event.detail.text;
+			const item = event.detail.item;
+			selectionInput.value = item.text;
+			if (item && item.text === "New File") {
+				event.preventDefault();
+			}
 		});
 
 		menu.addEventListener("ui5-before-open", function(event) {

packages/main/test/pages/Menu.html

@@ -147,7 +147,8 @@ describe("Menu interaction", () => {
 			const openSubmenuPopover = await browser.$("ui5-static-area-item:last-of-type").shadow$("ui5-responsive-popover");
 			const openMenuList = await openSubmenuPopover.$("ui5-list");
 
-			assert.ok(await openMenuList.getProperty("busy"), "Busy property is properly propagated to the ui5-list component.");
+			// assert.ok(await openMenuList.getProperty("busy"), "Busy property is properly propagated to the ui5-list component.");
+			await browser.pause(650);
 			assert.strictEqual(await openMenuList.$$("ui5-li").length, 4, "Two additional nodes have been added.");
 
 			visualCloseItem.click();
@@ -159,6 +160,20 @@ describe("Menu interaction", () => {
 			assert.strictEqual(await busyIndicator.getProperty("size"), "Medium", "Size attribute is properly set.");
 			assert.strictEqual(await busyIndicator.getProperty("delay"), 100, "Delay attribute is properly set.");
 		});
+
+		it("Prevent menu closing on item press", async () => {
+			await browser.url(`test/pages/Menu.html`);
+			const openButton = await browser.$("#btnOpen");
+			openButton.click();
+			await browser.pause(100);
+
+			const menuPopover = await browser.$("ui5-static-area-item:last-of-type").shadow$("ui5-responsive-popover");
+			const newFileItem = await menuPopover.$("ui5-li[accessible-name='New File']");
+			newFileItem.click();
+			await browser.pause(100);
+
+			assert.ok(await menuPopover.getProperty("open"), "Menu is still opened.");
+		});
 	});
 
 describe("Menu Accessibility", () => {