fix(ui5-side-navigation): disabled groups no longer interactive (#11404)

fixes: #11384

Author: s-todorova

packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx

@@ -3,10 +3,11 @@ import SideNavigationGroup from "../../src/SideNavigationGroup.js";
 import SideNavigationItem from "../../src/SideNavigationItem.js";
 
 describe("Component Behavior", () => {
-	describe("Main functionality", async () => {
-		it("rendering", async () => {
+	describe("Main functionality", () => {
+		it("rendering", () => {
 			cy.mount(
 				<SideNavigation style="height: 90vh; " id="sn1" collapsed={false}>
+					<SideNavigationItem text="Item" />
 					<SideNavigationGroup id="group1" expanded text="Group">
 						<SideNavigationItem text="Home 1"
 							icon="home"
@@ -28,15 +29,23 @@ describe("Component Behavior", () => {
 				.should("not.exist");
 		});
 
-		it("collapse/expand", async () => {
+		it("collapse/expand", () => {
 			cy.mount(
 				<SideNavigation style="height: 90vh; " id="sn1">
+					<SideNavigationItem text="Item" />
 					<SideNavigationGroup id="group1" expanded text="Group">
 						<SideNavigationItem text="Home 1"
 							icon="home"
 							href="#home"
 							title="Home tooltip" />
 					</SideNavigationGroup>
+					<SideNavigationItem text="Item" />
+					<SideNavigationGroup id="group2" disabled text="Group">
+						<SideNavigationItem text="Home 2"
+							icon="home"
+							href="#home"
+							title="Home tooltip" />
+					</SideNavigationGroup>
 				</SideNavigation>);
 
 			cy.get("#group1").should("have.prop", "expanded", true);
@@ -45,13 +54,42 @@ describe("Component Behavior", () => {
 				.shadow()
 				.find(".ui5-sn-item")
 				.realClick();
-			cy.get("#group1").should("not.have.prop", "expanded");
+			cy.get("#group1").should("have.prop", "expanded", false);
 
 			cy.get("#group1")
 				.shadow()
 				.find(".ui5-sn-item")
 				.realClick();
 			cy.get("#group1").should("have.prop", "expanded", true);
+
+			cy.get("#group2")
+				.shadow()
+				.find(".ui5-sn-item")
+				.realClick();
+			cy.get("#group2").should("have.prop", "expanded", false);
+		});
+
+		it("disabled", () => {
+			cy.mount(
+				<SideNavigation style="height: 90vh; " id="sn1">
+					<SideNavigationItem text="Item" />
+					<SideNavigationGroup id="group1" expanded text="Group 1">
+						<SideNavigationItem text="Home 1" />
+						<SideNavigationItem disabled text="Home 1" />
+					</SideNavigationGroup>
+				</SideNavigation>);
+
+			cy.get("#group1").should("not.have.attr", "disabled");
+			cy.get("#group1").invoke("prop", "disabled", true);
+			cy.get("#group1").should("have.attr", "disabled");
+			
+			cy.get("#group1").then(($group) => {
+				const group = $group[0] as SideNavigationGroup;
+				cy.wrap(group.items).each((item: SideNavigationItem) => {
+					cy.wrap(item).should("have.prop", "disabled", true);
+				});
+			});
 		});
+		
 	});
 });

packages/fiori/src/SideNavigationGroup.ts

@@ -68,6 +68,28 @@ class SideNavigationGroup extends SideNavigationItemBase {
 	@i18n("@ui5/webcomponents-fiori")
 	static i18nBundle: I18nBundle;
 
+	_initialChildDisabledStates: Map<SideNavigationItemBase, boolean> = new Map();
+
+	onBeforeRendering() {
+		this.allItems.forEach(item => {
+			if (!this._initialChildDisabledStates.has(item)) {
+				this._initialChildDisabledStates.set(item, item.disabled);
+			}
+		});
+
+		this._updateChildItemsDisabledState();
+	}
+
+	_updateChildItemsDisabledState() {
+		this.allItems.forEach(item => {
+			if (this.disabled) {
+				item.disabled = true;
+			} else {
+				item.disabled = this._initialChildDisabledStates.get(item)!;
+			}
+		});
+	}
+
 	get overflowItems() : Array<HTMLElement> {
 		const separator1 = this.shadowRoot!.querySelector<HTMLElement>(".ui5-sn-item-separator:first-child")!;
 		const separator2 = this.shadowRoot!.querySelector<HTMLElement>(".ui5-sn-item-separator:last-child")!;
@@ -156,7 +178,9 @@ class SideNavigationGroup extends SideNavigationItemBase {
 	}
 
 	_toggle() {
-		this.expanded = !this.expanded;
+		if (!this.disabled) {
+			this.expanded = !this.expanded;
+		}
 	}
 
 	get isSideNavigationGroup() {

packages/fiori/test/pages/SideNavigationWithGroups.html

@@ -104,6 +104,7 @@
 
 	<div style="float: right">
 		<ui5-checkbox id="collapsed" text="Collapsed"></ui5-checkbox>
+		<ui5-checkbox id="disable" text="disable group 1"></ui5-checkbox>
 		<ui5-checkbox id="density" text="Compact density"></ui5-checkbox>
 		<br>
 		<ui5-label for="slider" show-colon>Change width</ui5-label>
@@ -124,6 +125,10 @@
 			document.body.classList.toggle("ui5-content-density-compact", e.target.checked);
 		});
 
+		document.getElementById("disable").addEventListener("change", e => {
+			document.getElementById("group1").toggleAttribute("disabled", e.target.checked);
+		});
+
 		slider.addEventListener("ui5-input", function (event) {
 			sn1.style.width = event.target.value + 'px';
 		});