fix(ui5-side-navigation-item): click event is no longer fired twice (#…

…8944)
SAP · May 14, 2024 · 0dd36ca · 0dd36ca
1 parent 92b3cf8
commit 0dd36ca
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/fiori/src/SideNavigationSelectableItemBase.ts b/packages/fiori/src/SideNavigationSelectableItemBase.ts
@@ -162,6 +162,8 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 	}
 
 	_activate(e: KeyboardEvent | PointerEvent) {
+		e.stopPropagation();
+
 		if (this.isOverflow) {
 			this.fireEvent("click");
 		} else {

diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
@@ -54,6 +54,7 @@
 				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item disabled id="item1" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
+			<ui5-side-navigation-item id="toggle" text="Toggle" icon="menu"></ui5-side-navigation-item>
 
 			<!-- Fixed Items -->
 			<ui5-side-navigation-item id="fixedItem1" slot="fixedItems" text="Useful Links" icon="chain-link" tooltip="Useful links tooltip">
@@ -96,8 +97,12 @@
 			sideNavigation.collapsed = !sideNavigation.collapsed;
 		});
 
+		document.getElementById("toggle").addEventListener("click", () => {
+			sideNavigation.collapsed = !sideNavigation.collapsed;
+		});
+
 		document.querySelectorAll("ui5-side-navigation-item").forEach(function (item) {
-			item.addEventListener("ui5-click", function (event) {
+			item.addEventListener("click", function (event) {
 				clickInput.value = ++clickCounter;
 			});
 		});

diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js
@@ -235,9 +235,9 @@ describe("Component Behavior", () => {
 
 			// fixed items
 			assert.strictEqual(await sideNavigationFixedTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set");
-			assert.notExists(await items[8].getAttribute("aria-roledescription"), "Role description of the SideNavigation fixed tree item is not set");
-			assert.strictEqual(await items[8].getAttribute("aria-haspopup"), "tree", "There is 'aria-haspopup' with correct value");
-			assert.notExists(await items[9].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'");
+			assert.notExists(await items[9].getAttribute("aria-roledescription"), "Role description of the SideNavigation fixed tree item is not set");
+			assert.strictEqual(await items[9].getAttribute("aria-haspopup"), "tree", "There is 'aria-haspopup' with correct value");
+			assert.notExists(await items[10].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'");
 
 			// popup
 			await browser.$("#item2").click();