diff --git a/packages/main/src/ShellBar.js b/packages/main/src/ShellBar.js
index b14d54e27749..ab91bf45285a 100644
--- a/packages/main/src/ShellBar.js
+++ b/packages/main/src/ShellBar.js
@@ -352,13 +352,20 @@ class ShellBar extends UI5Element {
this._isInitialRendering = true;
this._focussedItem = null;
+ // marks if preventDefault() is called in item's press handler
+ this._defaultItemPressPrevented = false;
+
const that = this;
this._actionList = {
itemPress: event => {
const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
- popover.close();
+ if (!this._defaultItemPressPrevented) {
+ popover.close();
+ }
+
+ this._defaultItemPressPrevented = false;
},
};
@@ -480,6 +487,19 @@ class ShellBar extends UI5Element {
}
}
+ /**
+ * Closes the overflow area.
+ * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event
+ * @public
+ */
+ closeOverflow() {
+ const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
+
+ if (popover) {
+ popover.close();
+ }
+ }
+
_handleBarBreakpoints() {
const width = this.getBoundingClientRect().width;
const breakpoints = ShellBar.FIORI_3_BREAKPOINTS;
@@ -679,7 +699,13 @@ class ShellBar extends UI5Element {
this._itemNav.currentIndex = elementIndex;
if (refItemId) {
- this.items.filter(item => item.shadowRoot.querySelector(`#${refItemId}`))[0].fireEvent("press");
+ const shellbarItem = this.items.filter(item => {
+ return item.shadowRoot.querySelector(`#${refItemId}`);
+ })[0];
+
+ const prevented = !shellbarItem.fireEvent("press", { targetRef: event.target }, true);
+
+ this._defaultItemPressPrevented = prevented;
}
}
diff --git a/packages/main/src/ShellBarItem.js b/packages/main/src/ShellBarItem.js
index c3839c57c9b3..cf5efbc2ba58 100644
--- a/packages/main/src/ShellBarItem.js
+++ b/packages/main/src/ShellBarItem.js
@@ -42,9 +42,14 @@ const metadata = {
* Fired, when the item is pressed.
*
* @event
+ * @param {HTMLElement} targetRef dom ref of the clicked element
* @public
*/
- press: {},
+ press: {
+ detail: {
+ targetRef: { type: HTMLElement },
+ },
+ },
},
};
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html b/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html
index 8944f6c5e464..903117edd46c 100644
--- a/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html
+++ b/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html
@@ -158,6 +158,13 @@
+
+
+ Custom Popover Item 1
+ Custom Popover Item 2
+
+
+
@@ -190,7 +197,9 @@
["disc", "call"].forEach(function(id) {
window[id].addEventListener("ui5-press", function(event) {
+ event.preventDefault();
window["press-input"].value = event.target.id;
+ window["custom-item-popover"].openBy(event.detail.targetRef);
});
});