From bf426c094e8395bb263e9ac63f8014c0fcb19993 Mon Sep 17 00:00:00 2001
From: Gergana Georgieva <gergana.georgieva01@sap.com>
Date: Wed, 18 Dec 2024 16:54:30 +0200
Subject: [PATCH] fix(ui5-side-navigation): fix expand and collapse

---
 .../fiori/cypress/specs/SideNavigation.cy.ts  | 38 +++++++++++++++++++
 .../fiori/src/SideNavigationItemTemplate.tsx  |  6 ++-
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 packages/fiori/cypress/specs/SideNavigation.cy.ts

diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.ts b/packages/fiori/cypress/specs/SideNavigation.cy.ts
new file mode 100644
index 000000000000..31e035aa7f57
--- /dev/null
+++ b/packages/fiori/cypress/specs/SideNavigation.cy.ts
@@ -0,0 +1,38 @@
+import { html } from "lit";
+import "../../src/SideNavigation.js";
+import "../../src/SideNavigationItem.js";
+import "../../src/SideNavigationSubItem.js";
+
+const sample = html` <ui5-side-navigation>
+	<ui5-side-navigation-item
+		id="item1"
+		text="Home"
+		icon="home"
+		tooltip="Home tooltip"
+	></ui5-side-navigation-item>
+	<ui5-side-navigation-item id="item2" text="People" icon="group">
+		<ui5-side-navigation-sub-item
+			id="item21"
+			text="From My Team"
+			icon="employee-approvals"
+			tooltip="From My Team tooltip"
+		></ui5-side-navigation-sub-item>
+		<ui5-side-navigation-sub-item
+			id="item22"
+			text="From Other Teams"
+			icon="employee-rejections"
+		></ui5-side-navigation-sub-item>
+	</ui5-side-navigation-item>
+</ui5-side-navigation>`;
+
+describe("Side Navigation interaction", () => {
+	it("Tests that expand works", () => {
+		cy.mount(sample);
+
+		// act
+		cy.get("#item2").shadow().find(".ui5-sn-item-toggle-icon").realClick();
+
+		// assert
+		cy.get("#item2").should("have.attr", "expanded");
+	});
+});
diff --git a/packages/fiori/src/SideNavigationItemTemplate.tsx b/packages/fiori/src/SideNavigationItemTemplate.tsx
index 1c211b2caa98..0b98edaeafb7 100644
--- a/packages/fiori/src/SideNavigationItemTemplate.tsx
+++ b/packages/fiori/src/SideNavigationItemTemplate.tsx
@@ -115,7 +115,8 @@ function TreeItemTemplate(this: SideNavigationItem) {
 					{!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
 						name={this.expanded ? navDownArrow : navRightArrow}
-						onui5-click={this._onToggleClick}
+						// @ts-expect-error
+						onClick={this._onToggleClick}
 					/>
 					}
 				</a>
@@ -149,7 +150,8 @@ function TreeItemTemplate(this: SideNavigationItem) {
 					{!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
 						name={this.expanded ? navDownArrow : navRightArrow}
-						onui5-click={this._onToggleClick}
+						// @ts-expect-error
+						onClick={this._onToggleClick}
 					/>
 					}
 				</div>