Skip to content

Commit 783963d

Browse files
s-todorovas-todorova
committed
fix(ui5-side-navigation): disabled groups no longer interactive
fixes: #11384
1 parent 1dda953 commit 783963d

File tree

3 files changed

+43
-131
lines changed

3 files changed

+43
-131
lines changed

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

+20-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import SideNavigationGroup from "../../src/SideNavigationGroup.js";
33
import SideNavigationItem from "../../src/SideNavigationItem.js";
44

55
describe("Component Behavior", () => {
6-
describe("Main functionality", async () => {
7-
it("rendering", async () => {
6+
describe("Main functionality", () => {
7+
it("rendering", () => {
88
cy.mount(
99
<SideNavigation style="height: 90vh; " id="sn1" collapsed={false}>
10+
<SideNavigationItem text="Item" />
1011
<SideNavigationGroup id="group1" expanded text="Group">
1112
<SideNavigationItem text="Home 1"
1213
icon="home"
@@ -28,15 +29,23 @@ describe("Component Behavior", () => {
2829
.should("not.exist");
2930
});
3031

31-
it("collapse/expand", async () => {
32+
it("collapse/expand", () => {
3233
cy.mount(
3334
<SideNavigation style="height: 90vh; " id="sn1">
35+
<SideNavigationItem text="Item" />
3436
<SideNavigationGroup id="group1" expanded text="Group">
3537
<SideNavigationItem text="Home 1"
3638
icon="home"
3739
href="#home"
3840
title="Home tooltip" />
3941
</SideNavigationGroup>
42+
<SideNavigationItem text="Item" />
43+
<SideNavigationGroup id="group2" disabled text="Group">
44+
<SideNavigationItem text="Home 2"
45+
icon="home"
46+
href="#home"
47+
title="Home tooltip" />
48+
</SideNavigationGroup>
4049
</SideNavigation>);
4150

4251
cy.get("#group1").should("have.prop", "expanded", true);
@@ -45,13 +54,20 @@ describe("Component Behavior", () => {
4554
.shadow()
4655
.find(".ui5-sn-item")
4756
.realClick();
48-
cy.get("#group1").should("not.have.prop", "expanded");
57+
cy.get("#group1").should("have.prop", "expanded", false);
4958

5059
cy.get("#group1")
5160
.shadow()
5261
.find(".ui5-sn-item")
5362
.realClick();
5463
cy.get("#group1").should("have.prop", "expanded", true);
64+
65+
cy.get("#group2")
66+
.shadow()
67+
.find(".ui5-sn-item")
68+
.realClick();
69+
cy.get("#group2").should("not.have.prop", "expanded");
5570
});
71+
5672
});
5773
});

‎packages/fiori/src/SideNavigationGroup.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,9 @@ class SideNavigationGroup extends SideNavigationItemBase {
161161
}
162162

163163
_toggle() {
164-
this.expanded = !this.expanded;
164+
if (!this.disabled) {
165+
this.expanded = !this.expanded;
166+
}
165167
}
166168

167169
get isSideNavigationGroup() {

‎packages/fiori/test/pages/SideNavigation.html

+20-126
Original file line numberDiff line numberDiff line change
@@ -14,138 +14,32 @@
1414
</head>
1515

1616
<body class="sidenavigation1auto">
17-
<ui5-shellbar
18-
primary-title="UI5 Web Components"
19-
secondary-title="The Best Run SAP"
20-
>
21-
<ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
22-
<ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>
23-
</ui5-shellbar>
24-
25-
<div class="content">
26-
<ui5-side-navigation id="sn1" accessible-name="Main">
27-
28-
<!-- Header -->
29-
<div slot="header" class="header">
30-
<ui5-avatar size="L">
31-
<img src="./img/man_avatar_1.png" />
32-
</ui5-avatar>
33-
34-
<br>
35-
<ui5-title>William Brown</ui5-title>
36-
<ui5-label>UX expert</ui5-label>
37-
</div>
38-
39-
<!-- Items -->
40-
<ui5-side-navigation-item id="item1" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
41-
<ui5-side-navigation-item id="item2" text="People" expanded icon="group">
42-
<ui5-side-navigation-sub-item id="item21" text="From My Team" icon="employee-approvals" tooltip="From My Team tooltip"></ui5-side-navigation-sub-item>
43-
<ui5-side-navigation-sub-item id="item22" text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
17+
<ui5-side-navigation>
18+
<ui5-side-navigation-item disabled text="Home" icon="home"></ui5-side-navigation-item>
19+
<ui5-side-navigation-group disabled text="Group 1" expanded>
20+
<ui5-side-navigation-item text="People" expanded icon="group">
21+
<ui5-side-navigation-sub-item text="From My Team"></ui5-side-navigation-sub-item>
22+
<ui5-side-navigation-sub-item text="From Other Teams"></ui5-side-navigation-sub-item>
4423
</ui5-side-navigation-item>
24+
</ui5-side-navigation-group>
25+
<ui5-side-navigation-group text="Group 2" expanded>
4526
<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
46-
<ui5-side-navigation-item id="item3" text="Events lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="calendar">
47-
<ui5-side-navigation-sub-item text="Local" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
27+
<ui5-side-navigation-item text="Locations" disabled icon="locate-me"></ui5-side-navigation-item>
28+
<ui5-side-navigation-item text="Events" icon="calendar">
29+
<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
4830
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
4931
</ui5-side-navigation-item>
50-
<ui5-side-navigation-item id="externalLinkItem" text="External Link Unselectable" icon="chain-link" href="https://sap.com" unselectable target="_blank"></ui5-side-navigation-item>
51-
<ui5-side-navigation-item id="externalLinkItem2" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
52-
53-
<ui5-side-navigation-item id="item4" text="Home 1" icon="home" tooltip="Home 1 tooltip">
54-
<ui5-side-navigation-sub-item text="Local 1" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
55-
<ui5-side-navigation-sub-item text="Others 1"></ui5-side-navigation-sub-item>
56-
</ui5-side-navigation-item>
57-
58-
<ui5-side-navigation-item disabled id="item1-disabled" text="Home 2" icon="home" tooltip="Home 2 tooltip"></ui5-side-navigation-item>
59-
<ui5-side-navigation-item text="Home (unselectable)" icon="home" unselectable></ui5-side-navigation-item>
60-
<ui5-side-navigation-item text="Home parent (unselectable)" icon="home" unselectable>
61-
<ui5-side-navigation-sub-item text="Local 2"></ui5-side-navigation-sub-item>
62-
<ui5-side-navigation-sub-item text="Others 3"></ui5-side-navigation-sub-item>
63-
</ui5-side-navigation-item>
64-
<ui5-side-navigation-item design="Action" text="Quick Create parent test" icon="write-new" unselectable>
65-
<ui5-side-navigation-sub-item design="Action" text="Quick Create child test" unselectable></ui5-side-navigation-sub-item>
66-
</ui5-side-navigation-item>
67-
<ui5-side-navigation-item design="Action" text="Quick Create Disabled" icon="write-new" disabled unselectable></ui5-side-navigation-item>
68-
<ui5-side-navigation-item design="Action" href="https://sap.com" target="_blank" text="Quick Create link test" icon="write-new" unselectable></ui5-side-navigation-item>
69-
70-
<!-- Fixed Items -->
71-
<ui5-side-navigation-item id="fixedItem1" slot="fixedItems" text="Useful Links" icon="chain-link" tooltip="Useful links tooltip">
72-
<ui5-side-navigation-sub-item id="fixedItem11" text="Vacation Tool" tooltip="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
73-
<ui5-side-navigation-sub-item id="fixedItem12" text="HR tool"></ui5-side-navigation-sub-item>
74-
<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
75-
<ui5-side-navigation-sub-item text="External Link (unselectable)" href="https://sap.com" target="_blank" unselectable></ui5-side-navigation-sub-item>
76-
<ui5-side-navigation-sub-item text="Quick Create" design="Action" unselectable></ui5-side-navigation-sub-item>
77-
</ui5-side-navigation-item>
78-
<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
79-
<ui5-side-navigation-item slot="fixedItems" text="External Link 2" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
80-
<ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" design="Action" unselectable id="quickCreate"></ui5-side-navigation-item>
81-
</ui5-side-navigation>
82-
<div class="inner-content">
83-
<div class="form-field">
84-
<ui5-label show-colon>selection-change event</ui5-label>
85-
<ui5-input disabled="" id="counter" value="0"></ui5-input>
86-
</div>
87-
<div class="form-field">
88-
<ui5-label show-colon>click event</ui5-label>
89-
<ui5-input disabled id="click-counter" value="0"></ui5-input>
90-
</div>
91-
<div class="form-field">
92-
<ui5-label show-colon>prevent selection-change event</ui5-label>
93-
<ui5-checkbox id="prevent-selection"></ui5-checkbox>
94-
</div>
95-
<div class="form-field">
96-
<ui5-label show-colon>ensure overflow</ui5-label>
97-
<ui5-checkbox id="ensure-overflow"></ui5-checkbox>
98-
</div>
99-
<div class="form-field">
100-
<ui5-label show-colon>Compact Density</ui5-label>
101-
<ui5-checkbox id="compact-density"></ui5-checkbox>
102-
</div>
103-
</div>
104-
</div>
32+
</ui5-side-navigation-group>
33+
<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link">
34+
<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank" unselectable></ui5-side-navigation-sub-item>
35+
</ui5-side-navigation-item>
36+
<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
37+
<ui5-side-navigation-item slot="fixedItems" text="External Link 1" icon="chain-link" href="https://sap.com" target="_blank" unselectable></ui5-side-navigation-item>
38+
<ui5-side-navigation-item slot="fixedItems" text="External Link 2" icon="chain-link" href="https://sap.com" target="_blank" unselectable></ui5-side-navigation-item>
39+
</ui5-side-navigation>
10540

10641
<script>
107-
var sideNavigation = document.querySelector("ui5-side-navigation"),
108-
input = document.querySelector("#counter"),
109-
clickInput = document.querySelector("#click-counter"),
110-
preventDefaultCb = document.querySelector("#prevent-selection"),
111-
preventSelectionChange = false,
112-
counter = 0,
113-
clickCounter = 0;
114-
115-
document.querySelector("#startButton").addEventListener("click", function (event) {
116-
sideNavigation.collapsed = !sideNavigation.collapsed;
117-
});
118-
119-
document.querySelectorAll("ui5-side-navigation-item").forEach(function (item) {
120-
item.addEventListener("ui5-click", function (event) {
121-
clickInput.value = `${++clickCounter}`;
122-
});
123-
});
124-
125-
preventDefaultCb.addEventListener("ui5-change", function (event) {
126-
preventSelectionChange = event.target.checked;
127-
});
128-
129-
document.getElementById("ensure-overflow").addEventListener("ui5-change", function (event) {
130-
document.getElementById("sn1").classList.toggle("ensure-overflow", event.target.checked);
131-
});
132-
133-
document.getElementById("compact-density").addEventListener("ui5-change", function (event) {
134-
document.body.classList.toggle("sapUiSizeCompact", event.target.checked);
135-
});
136-
137-
sideNavigation.addEventListener("ui5-selection-change", function (event) {
138-
if (preventSelectionChange) {
139-
event.preventDefault();
140-
return;
141-
}
142-
143-
input.value = `${++counter}`;
144-
});
145-
146-
document.getElementById("quickCreate").accessibilityAttributes = {
147-
hasPopup: "dialog"
148-
};
42+
14943

15044
</script>
15145
</body>

0 commit comments

Comments
 (0)