fix(ui5-shellbar): allow prevent default 'menu-item-click' action (#8172

) * fix(ui5-shellbar): allow prevent default 'menu-item-click' action * fix(ui5-shellbar): remove recundant code
SAP · Jan 25, 2024 · d16efb6 · d16efb6
1 parent 7075f9a
commit d16efb6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
@@ -563,10 +563,12 @@ class ShellBar extends UI5Element {
 	}
 
 	_menuItemPress(e: CustomEvent<ListSelectionChangeEventDetail>) {
-		this.menuPopover!.close();
-		this.fireEvent<ShellBarMenuItemClickEventDetail>("menu-item-click", {
+		const shouldContinue = this.fireEvent<ShellBarMenuItemClickEventDetail>("menu-item-click", {
 			item: e.detail.selectedItems[0],
 		}, true);
+		if (shouldContinue) {
+			this.menuPopover!.close();
+		}
 	}
 
 	_logoPress() {

diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
@@ -97,6 +97,7 @@
 		<ui5-input slot="searchField" value-state="Error"></ui5-input>
 	</ui5-shellbar>
 
+	<ui5-checkbox id="checkKeepPopoverOpen" text="keep popover open on menu-item click"></ui5-checkbox>
 	<ui5-shellbar
 			class="shellbar-example"
 			id="shellbar"
@@ -269,6 +270,9 @@ <h3>ShellBar in Compact</h3>
 		});
 
 		shellbar.addEventListener("ui5-menu-item-click", function(event) {
+			if (checkKeepPopoverOpen.checked) {
+				event.preventDefault();
+			}
 			var item = event.detail.item;
 			window["press-input"].value = item.textContent;
 			window["press-data"].value = item.getAttribute("data-key");

diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
@@ -65,16 +65,34 @@ describe("Component Behavior", () => {
 	});
 
 	describe("ui5-shellbar menu", () => {
+		it("tests prevents close on content click", async () => {
+			const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
+			const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
+			const firstMenuItem = await menuPopover.$("ui5-list > ui5-li");
+			const checkBox = await browser.$("#checkKeepPopoverOpen");
+
+			await checkBox.setProperty("checked", true);
+
+			await primaryTitle.click();
+			await firstMenuItem.click();
+
+			assert.strictEqual(await menuPopover.getProperty("opened"), true, "Popover remains open");
+		});
+
 		it("tests close on content click", async () => {
 			const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
 			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
 			const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
 			const firstMenuItem = await menuPopover.$("ui5-list > ui5-li");
+			const checkBox = await browser.$("#checkKeepPopoverOpen");
+
+			await checkBox.setProperty("checked", false);
 
 			await primaryTitle.click();
 			await firstMenuItem.click();
 
-			assert.strictEqual(await menuPopover.getProperty("opened"), false, "Count property propagates to ui5-button");
+			assert.strictEqual(await menuPopover.getProperty("opened"), false, "Popover is closed");
 		});
 	});