Skip to content

Commit 7636bb7

Browse files
MapTo0MapTo0
authored
fix(ui5-shellbar): provide correct target ref when item is in overflow popover (#1334)
FIXES: #1325
1 parent 5a99536 commit 7636bb7

File tree

3 files changed

+137
-120
lines changed

3 files changed

+137
-120
lines changed

‎packages/fiori/src/ShellBar.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,7 @@ const metadata = {
239239

240240
/**
241241
* Fired, when the product switch icon is activated.
242+
* <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
242243
*
243244
* @event
244245
* @param {HTMLElement} targetRef dom ref of the activated element
@@ -280,6 +281,7 @@ const metadata = {
280281

281282
/**
282283
* Fired, when a menu item is activated
284+
* <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
283285
*
284286
* @event
285287
* @param {HTMLElement} item dom ref of the activated list item
@@ -448,7 +450,7 @@ class ShellBar extends UI5Element {
448450
_menuItemPress(event) {
449451
this.fireEvent("menuItemClick", {
450452
item: event.detail.item,
451-
});
453+
}, true);
452454
}
453455

454456
_logoPress(event) {
@@ -712,9 +714,11 @@ class ShellBar extends UI5Element {
712714
}
713715

714716
_handleProductSwitchPress(event) {
715-
this.fireEvent("productSwitchClick", {
716-
targetRef: this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch"),
717-
});
717+
const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");
718+
719+
this._defaultItemPressPrevented = !this.fireEvent("productSwitchClick", {
720+
targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : buttonRef,
721+
}, true);
718722
}
719723

720724
/**

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

+117-116
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,141 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<title>Shell Bar</title>
7-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
8-
9-
<script data-ui5-config type="application/json">
10-
{
11-
"rtl": false
12-
}
13-
</script>
14-
15-
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Shell Bar</title>
7+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
8+
9+
<script data-ui5-config type="application/json">
10+
{
11+
"rtl": false
12+
}
13+
</script>
14+
15+
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
1616
<script src="../../resources/bundle.esm.js" type="module"></script>
1717
<script nomodule src="../../resources/bundle.es5.js"></script>
1818

19-
<style>
20-
body, html {
21-
width: 100%;
22-
height: 100%;
23-
padding: 0;
24-
margin: 0;
25-
}
26-
27-
.popover-content {
28-
margin-top: 1rem;
29-
}
30-
31-
.shellbar-example {
32-
margin-top: 1px;
33-
}
34-
</style>
19+
<style>
20+
body, html {
21+
width: 100%;
22+
height: 100%;
23+
padding: 0;
24+
margin: 0;
25+
}
26+
27+
.popover-content {
28+
margin-top: 1rem;
29+
}
30+
31+
.shellbar-example {
32+
margin-top: 1px;
33+
}
34+
</style>
3535
</head>
3636

3737
<body style="background-color: var(--sapBackgroundColor);">
3838
<ui5-shellbar
39-
class="shellbar-example"
40-
primary-title="Product Title"
41-
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
42-
secondary-title="Second Title"
39+
class="shellbar-example"
40+
primary-title="Product Title"
41+
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
42+
secondary-title="Second Title"
4343
></ui5-shellbar>
4444

4545
<ui5-shellbar
46-
class="shellbar-example"
47-
primary-title="Product Title"
48-
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
49-
secondary-title="Second Title"
50-
show-co-pilot
46+
class="shellbar-example"
47+
primary-title="Product Title"
48+
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
49+
secondary-title="Second Title"
50+
show-co-pilot
5151
></ui5-shellbar>
5252

5353
<ui5-shellbar
54-
class="shellbar-example"
55-
primary-title="Product Title"
56-
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
57-
secondary-title="Second Title"
58-
show-notifications
59-
show-product-switch
54+
class="shellbar-example"
55+
primary-title="Product Title"
56+
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
57+
secondary-title="Second Title"
58+
show-notifications
59+
show-product-switch
6060
></ui5-shellbar>
6161

6262
<ui5-shellbar
63-
class="shellbar-example"
64-
primary-title="Custom Actions"
65-
secondary-title="Second Title"
66-
id="shellbarwithitems"
63+
class="shellbar-example"
64+
primary-title="Custom Actions"
65+
secondary-title="Second Title"
66+
id="shellbarwithitems"
6767
>
68-
<ui5-shellbar-item icon="accelerated" text="Hello World!"></ui5-shellbar-item>
69-
<ui5-shellbar-item icon="accept" text="Hello World!"></ui5-shellbar-item>
70-
<ui5-shellbar-item icon="alert" text="Hello World!"></ui5-shellbar-item>
71-
<ui5-shellbar-item icon="discussion" text="Hello World!" count="42"></ui5-shellbar-item>
72-
<ui5-shellbar-item icon="error" text="Hello World!"></ui5-shellbar-item>
73-
<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
74-
<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
75-
<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
76-
<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
68+
<ui5-shellbar-item icon="accelerated" text="Hello World!"></ui5-shellbar-item>
69+
<ui5-shellbar-item icon="accept" text="Hello World!"></ui5-shellbar-item>
70+
<ui5-shellbar-item icon="alert" text="Hello World!"></ui5-shellbar-item>
71+
<ui5-shellbar-item icon="discussion" text="Hello World!" count="42"></ui5-shellbar-item>
72+
<ui5-shellbar-item icon="error" text="Hello World!"></ui5-shellbar-item>
73+
<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
74+
<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
75+
<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
76+
<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
7777
</ui5-shellbar>
7878

7979
<ui5-shellbar
80-
class="shellbar-example"
81-
secondary-title="No primary title"
80+
class="shellbar-example"
81+
secondary-title="No primary title"
8282
></ui5-shellbar>
8383

8484
<ui5-shellbar
85-
id="shellbarWithLogoClick"
86-
class="shellbar-example"
87-
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
88-
primary-title="SAP Labs Bulgaria"
89-
show-notifications
90-
show-product-switch
85+
id="shellbarWithLogoClick"
86+
class="shellbar-example"
87+
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
88+
primary-title="SAP Labs Bulgaria"
89+
show-notifications
90+
show-product-switch
9191
>
92-
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
92+
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
9393

94-
<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
95-
<ui5-shellbar-item icon="thing-type" text="Messages"></ui5-shellbar-item>
96-
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
97-
<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
94+
<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
95+
<ui5-shellbar-item icon="thing-type" text="Messages"></ui5-shellbar-item>
96+
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
97+
<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
9898

99-
<ui5-input slot="searchField"></ui5-input>
99+
<ui5-input slot="searchField"></ui5-input>
100100

101101
</ui5-shellbar>
102102

103103
<ui5-shellbar
104-
class="shellbar-example"
105-
id="shellbar"
106-
primary-title="Product Title"
107-
secondary-title="Second title"
108-
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
109-
second-title="Second Title"
110-
notification-count="99+"
111-
show-notifications
112-
show-product-switch
113-
show-co-pilot
104+
class="shellbar-example"
105+
id="shellbar"
106+
primary-title="Product Title"
107+
secondary-title="Second title"
108+
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
109+
second-title="Second Title"
110+
notification-count="99+"
111+
show-notifications
112+
show-product-switch
113+
show-co-pilot
114114
>
115115

116-
<ui5-avatar slot="profile" image="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"></ui5-avatar>
116+
<ui5-avatar slot="profile" image="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"></ui5-avatar>
117117

118-
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
118+
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
119119

120-
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
121-
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
120+
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
121+
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
122122

123-
<ui5-input slot="searchField"></ui5-input>
123+
<ui5-input slot="searchField"></ui5-input>
124124

125-
<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
126-
<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
127-
<ui5-li slot="menuItems">Application 3</ui5-li>
128-
<ui5-li slot="menuItems">Application 4</ui5-li>
129-
<ui5-li slot="menuItems">Application 5</ui5-li>
125+
<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
126+
<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
127+
<ui5-li slot="menuItems">Application 3</ui5-li>
128+
<ui5-li slot="menuItems">Application 4</ui5-li>
129+
<ui5-li slot="menuItems">Application 5</ui5-li>
130130
</ui5-shellbar>
131131

132132
<section class="ui5-content-density-compact">
133133
<h3>ShellBar in Compact</h3>
134134
<div>
135135
<ui5-shellbar primary-title="Product Title" show-notifications>
136136
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
137-
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
138-
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
137+
<ui5-shellbar-item icon="disconnected" text="Disconnect"></ui5-shellbar-item>
138+
<ui5-shellbar-item icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
139139
<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
140140
<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
141141
<ui5-li slot="menuItems">Application 3</ui5-li>
@@ -146,36 +146,36 @@ <h3>ShellBar in Compact</h3>
146146
</section>
147147

148148
<ui5-popover id="popover" placement-type="Bottom">
149-
<div class="popover-header">
150-
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">John Doe</ui5-title>
151-
</div>
152-
153-
<div class="popover-content">
154-
<ui5-list separators="None" >
155-
<ui5-li icon="sys-find">App Finder</ui5-li>
156-
<ui5-li icon="settings">Settings</ui5-li>
157-
<ui5-li icon="edit">Edit Home Page</ui5-li>
158-
<ui5-li icon="sys-help">Help</ui5-li>
159-
<ui5-li icon="log">Sign out</ui5-li>
160-
</ui5-list>
161-
</div>
149+
<div class="popover-header">
150+
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">John Doe</ui5-title>
151+
</div>
152+
153+
<div class="popover-content">
154+
<ui5-list separators="None" >
155+
<ui5-li icon="sys-find">App Finder</ui5-li>
156+
<ui5-li icon="settings">Settings</ui5-li>
157+
<ui5-li icon="edit">Edit Home Page</ui5-li>
158+
<ui5-li icon="sys-help">Help</ui5-li>
159+
<ui5-li icon="log">Sign out</ui5-li>
160+
</ui5-list>
161+
</div>
162162
</ui5-popover>
163163

164164
<ui5-popover id="app-list-popover" placement-type="Bottom">
165-
<ui5-list separators="None">
166-
<ui5-li>Application 1</ui5-li>
167-
<ui5-li>Application 2</ui5-li>
168-
<ui5-li>Application 3</ui5-li>
169-
<ui5-li>Application 4</ui5-li>
170-
<ui5-li>Application 5</ui5-li>
171-
</ui5-list>
165+
<ui5-list separators="None">
166+
<ui5-li>Application 1</ui5-li>
167+
<ui5-li>Application 2</ui5-li>
168+
<ui5-li>Application 3</ui5-li>
169+
<ui5-li>Application 4</ui5-li>
170+
<ui5-li>Application 5</ui5-li>
171+
</ui5-list>
172172
</ui5-popover>
173173

174174
<ui5-popover id="custom-item-popover" placement-type="Bottom">
175-
<ui5-list separators="None">
176-
<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
177-
<ui5-li type="Active">Custom Popover Item 2</ui5-li>
178-
</ui5-list>
175+
<ui5-list separators="None">
176+
<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
177+
<ui5-li type="Active">Custom Popover Item 2</ui5-li>
178+
</ui5-list>
179179
</ui5-popover>
180180

181181
<ui5-input id="press-input" style="margin-top: 2rem;"></ui5-input>
@@ -216,6 +216,7 @@ <h3>ShellBar in Compact</h3>
216216
});
217217

218218
shellbar.addEventListener("ui5-productSwitchClick", function(event) {
219+
event.preventDefault();
219220
window["press-input"].value = "Product Switch"
220221
});
221222

‎packages/fiori/test/specs/ShellBar.spec.js

+12
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,18 @@ describe("Component Behavior", () => {
343343
assert.strictEqual(input.getValue(), "Product Switch", "Input value is set by click event of Product Switch icon");
344344
});
345345

346+
it("tests preventDefalt of productSwitchClick event", () => {
347+
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
348+
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#shellbar")
349+
const overflowPopover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
350+
const productSwitchIcon = overflowPopover.$("ui5-list ui5-li:nth-child(5)");
351+
352+
overflowButton.click();
353+
productSwitchIcon.click();
354+
355+
assert.ok(overflowPopover.isDisplayed(), "overflow popover should not be closed");
356+
});
357+
346358
it("tests if searchfield toggles when clicking on search icon", () => {
347359
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
348360
const searchField = browser.$("#shellbar ui5-input");

0 commit comments

Comments
 (0)