Skip to content

Commit 04b44b4

Browse files
ilhan007ilhan007
authored
fix(ui5-shellbar): fix open popup on notificationClick (#1632)
The built-in notification icon can overflow and if you try to open another popover by clicking on the corresponding list item within the overflow, it does not open as the provided targetRef is not correct. Now it provides the correct targetRef, considering whether the notification icon is in or out of the overflow. In addition, all samples and test pages that opens popover from the notification icon use event.preventDefault() to prevent the overflow popover from closing.
1 parent d9a5e59 commit 04b44b4

9 files changed

+36
-16
lines changed

‎packages/fiori/src/ShellBar.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -694,9 +694,11 @@ class ShellBar extends UI5Element {
694694
}
695695

696696
_handleNotificationsPress(event) {
697-
this.fireEvent("notificationsClick", {
698-
targetRef: this.shadowRoot.querySelector(".ui5-shellbar-bell-button"),
699-
});
697+
const notificationIconRef = this.shadowRoot.querySelector(".ui5-shellbar-bell-button");
698+
699+
this._defaultItemPressPrevented = !this.fireEvent("notificationsClick", {
700+
targetRef: notificationIconRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : notificationIconRef,
701+
}, true);
700702
}
701703

702704
_handleProfilePress(event) {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,7 @@ <h3>Events on ui5-list level</h3>
314314
});
315315

316316
shellbar.addEventListener("ui5-notificationsClick", function(event) {
317+
event.preventDefault();
317318
notificationsPopover.openBy(event.detail.targetRef);
318319
});
319320
</script>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,7 @@ <h3>Events on ui5-list level</h3>
282282
});
283283

284284
shellbar.addEventListener("ui5-notificationsClick", function(event) {
285+
event.preventDefault();
285286
notificationsPopover.openBy(event.detail.targetRef);
286287
});
287288
</script>

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
<section class="ui5-content-density-compact">
135135
<h3>ShellBar in Compact</h3>
136136
<div>
137-
<ui5-shellbar primary-title="Product Title" show-notifications>
137+
<ui5-shellbar id="shelbarCompact" primary-title="Product Title" show-notifications show-product-switch>
138138
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
139139
<ui5-shellbar-item icon="disconnected" text="Disconnect"></ui5-shellbar-item>
140140
<ui5-shellbar-item icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
@@ -233,24 +233,26 @@ <h3>ShellBar in Compact</h3>
233233
});
234234

235235
shellbar.addEventListener("ui5-notificationsClick", function(event) {
236-
window["press-input"].value = "Notifications"
236+
window["press-input"].value = "Notifications";
237+
event.preventDefault();
238+
popover.openBy(event.detail.targetRef);
237239
});
238240

239241
shellbar.addEventListener("ui5-productSwitchClick", function(event) {
240242
event.preventDefault();
241-
window["press-input"].value = "Product Switch"
243+
window["press-input"].value = "Product Switch";
242244
});
243245

244246
shellbar.addEventListener("ui5-logoClick", function(event) {
245-
window["press-input"].value = "Logo"
247+
window["press-input"].value = "Logo";
246248
});
247249

248250
shellbarWithLogoClick.addEventListener("ui5-logoClick", function(event) {
249251
window["press-input2"].value = shellbarWithLogoClick.primaryTitle.replace(/\s/g, "");
250252
});
251253

252254
shellbar.addEventListener("ui5-coPilotClick", function(event) {
253-
window["press-input"].value = "CoPilot"
255+
window["press-input"].value = "CoPilot";
254256
});
255257

256258
shellbar.addEventListener("ui5-menuItemClick", function(event) {
@@ -259,6 +261,16 @@ <h3>ShellBar in Compact</h3>
259261
window["press-data"].value = item.getAttribute("data-key");
260262
});
261263

264+
shelbarCompact.addEventListener("ui5-notificationsClick", function(event) {
265+
event.preventDefault();
266+
popover.openBy(event.detail.targetRef);
267+
});
268+
269+
shelbarCompact.addEventListener("ui5-productSwitchClick", function(event) {
270+
event.preventDefault();
271+
popover.openBy(event.detail.targetRef);
272+
});
273+
262274
menuItemsSB.addEventListener("ui5-menuItemClick", function(event) {
263275
var item = event.detail.item;
264276
window["result-value"].value = item.textContent;

‎packages/fiori/test/samples/NotificationListGroupItem.sample.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
300300

301301
<script>
302302
shellbar.addEventListener("ui5-notificationsClick", function(event) {
303+
event.preventDefault();
303304
notificationsPopover.openBy(event.detail.targetRef);
304305
});
305306
</script>

‎packages/fiori/test/samples/NotificationListItem.sample.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ <h3>NotificationListItem In ShellBar</h3>
220220

221221
<script>
222222
shellbar.addEventListener("ui5-notificationsClick", function(event) {
223+
event.preventDefault();
223224
notificationsPopover.openBy(event.detail.targetRef);
224225
});
225226
</script>

‎packages/fiori/test/samples/ProductSwitch.sample.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ <h3>ProductSwitch within ShellBar</h3>
6767
if (popover.opened) {
6868
popover.close();
6969
} else {
70+
event.preventDefault();
7071
popover.openBy(event.detail.targetRef);
7172
}
7273
});

‎packages/fiori/test/samples/ShellBar.sample.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h2 class="control-header">ShellBar</h2>
99

1010
<div class="control-tag">&lt;ui5-shellbar&gt;</div>
1111

12-
<!-- ShellBar -->
12+
<!-- ShellBar -->
1313
<section>
1414
<h3>ShellBar</h3>
1515
<div class="snippet">

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ describe("Component Behavior", () => {
231231
assert.ok(menuPopover.isDisplayedInViewport(), "Menu should be shown");
232232
});
233233

234-
it("tests notificationsPress event", () => {
234+
it("tests notificationsClick event", () => {
235235
const notificationsIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-bell-button");
236236
const input = browser.$("#press-input");
237237

@@ -241,15 +241,15 @@ describe("Component Behavior", () => {
241241
assert.strictEqual(input.getValue(), "Notifications", "Input value is set by click event of Notifications icon");
242242
});
243243

244-
it("tests profilePress event", () => {
244+
it("tests profileClick event", () => {
245245
const profileIcon = browser.$("#shellbar").shadow$("[profile-btn]");
246246
const input = browser.$("#press-input");
247247

248248
profileIcon.click();
249249
assert.strictEqual(input.getValue(), "Profile", "Input value is set by click event of Profile");
250250
});
251251

252-
it("tests productSwitchPress event", () => {
252+
it("tests productSwitchClick event", () => {
253253
const productSwitchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-button-product-switch");
254254
const input = browser.$("#press-input");
255255

@@ -331,7 +331,7 @@ describe("Component Behavior", () => {
331331
assert.ok(menuPopover.isDisplayedInViewport(), "Menu should be shown");
332332
});
333333

334-
it("tests notificationsPress event", () => {
334+
it("tests notificationsClick event", () => {
335335
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
336336
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#shellbar")
337337
const overflowPopover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
@@ -342,17 +342,18 @@ describe("Component Behavior", () => {
342342
notificationListItem.click();
343343

344344
assert.strictEqual(input.getValue(), "Notifications", "Input value is set by click event of Notifications icon");
345+
assert.ok(overflowPopover.isDisplayed(), "overflow popover should not be closed");
345346
});
346347

347-
it("tests profilePress event", () => {
348+
it("tests profileClick event", () => {
348349
const profileIcon = browser.$("#shellbar").shadow$("[profile-btn]");
349350
const input = browser.$("#press-input");
350351

351352
profileIcon.click();
352353
assert.strictEqual(input.getValue(), "Profile", "Input value is set by click event of Profile");
353354
});
354355

355-
it("tests productSwitchPress event", () => {
356+
it("tests productSwitchClick event", () => {
356357
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
357358
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#shellbar")
358359
const overflowPopover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
@@ -365,7 +366,7 @@ describe("Component Behavior", () => {
365366
assert.strictEqual(input.getValue(), "Product Switch", "Input value is set by click event of Product Switch icon");
366367
});
367368

368-
it("tests preventDefalt of productSwitchClick event", () => {
369+
it("tests preventDefault of productSwitchClick event", () => {
369370
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
370371
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#shellbar")
371372
const overflowPopover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");

0 commit comments

Comments
 (0)