diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js
index 63ea1442e143..4f7b17cd874c 100644
--- a/packages/main/src/Dialog.js
+++ b/packages/main/src/Dialog.js
@@ -187,6 +187,10 @@ class Dialog extends Popup {
return true;
}
+ get shouldHideBackdrop() { // Required by Popup.js
+ return false;
+ }
+
get _ariaLabelledBy() { // Required by Popup.js
return this.ariaLabel ? undefined : "ui5-popup-header";
}
diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
index ad49cfb37504..12ec2757acf8 100644
--- a/packages/main/src/Popover.js
+++ b/packages/main/src/Popover.js
@@ -106,6 +106,17 @@ const metadata = {
type: Boolean,
},
+ /**
+ * Defines whether the block layer will be shown if modal property is set to true.
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ * @since 1.0.0-rc.10
+ */
+ hideBackdrop: {
+ type: Boolean,
+ },
+
/**
* Determines whether the ui5-popover
arrow is hidden.
*
@@ -620,6 +631,10 @@ class Popover extends Popup {
return this.modal;
}
+ get shouldHideBackdrop() { // Required by Popup.js
+ return this.hideBackdrop;
+ }
+
get _ariaLabelledBy() { // Required by Popup.js
return this.ariaLabel ? undefined : "ui5-popup-header";
}
diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
index 4f4fbf106b63..7a6052312953 100644
--- a/packages/main/src/Popup.js
+++ b/packages/main/src/Popup.js
@@ -67,7 +67,7 @@ const metadata = {
* Defines the aria-label attribute for the popup
*
* @type {String}
- * @defaultvalue: ""
+ * @defaultvalue ""
* @private
* @since 1.0.0-rc.8
*/
@@ -313,7 +313,7 @@ class Popup extends UI5Element {
return;
}
- if (this.isModal) {
+ if (this.isModal && !this.shouldHideBackdrop) {
// create static area item ref for block layer
this.getStaticAreaItemDomRef();
this._blockLayerHidden = false;
@@ -430,6 +430,15 @@ class Popup extends UI5Element {
*/
get isModal() {} // eslint-disable-line
+ /**
+ * Implement this getter with relevant logic in order to hide the block layer (f.e. based on a public property)
+ *
+ * @protected
+ * @abstract
+ * @returns {boolean}
+ */
+ get shouldHideBackdrop() {} // eslint-disable-line
+
/**
* Return the ID of an element in the shadow DOM that is going to label this popup
*
diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
index 0e3c001a6af9..a54fb1b8b138 100644
--- a/packages/main/test/pages/Popover.html
+++ b/packages/main/test/pages/Popover.html
@@ -171,6 +171,20 @@
+ Opens modal popover with no block layer!
+
+
+
+ Hello
+ Again
+ Wooooooooooooooooooooooooooooorld
+
+
+
+ Close
+
+
+
Opens popover with initial focus!
@@ -374,6 +388,14 @@
modalPopover.openBy(btnPopModal);
});
+ btnPopModalNoLayer.addEventListener("click", function() {
+ modalPopoverNoLayer.openBy(btnPopModalNoLayer);
+ });
+
+ modalPopoverNoLayerClose.addEventListener("click", function() {
+ modalPopoverNoLayer.close();
+ });
+
modalPopoverClose.addEventListener("click", function (event) {
modalPopover.close();
});
diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js
index 785a78095c74..ce762f5cebb6 100644
--- a/packages/main/test/specs/Popover.spec.js
+++ b/packages/main/test/specs/Popover.spec.js
@@ -137,6 +137,32 @@ describe("Popover general interaction", () => {
assert.ok(!popover.isDisplayedInViewport(), "Popover is closed.");
});
+ it("tests modal popover with no block layer", () => {
+ const btnOpenPopover = $("#btnPopModalNoLayer");
+ const popover = $("#modalPopoverNoLayer");
+ const popoverId = popover.getProperty("_id");
+
+ btnOpenPopover.click();
+ assert.ok(popover.getProperty("opened"), "Popover is opened.");
+
+ const blockLayerIsCreated = browser.execute( (popoverId) => {
+ const staticAreaItems = document.querySelectorAll("ui5-static-area-item");
+ let result = false;
+
+ staticAreaItems.forEach(item => {
+ if (item.shadowRoot.querySelector(".ui5-block-layer") && item.classList.contains(popoverId)) {
+ result = true;
+ }
+ });
+
+ return result
+ }, popoverId);
+
+ assert.notOk(blockLayerIsCreated, "Block layer is not created.");
+
+ browser.keys("Escape");
+ });
+
it("tests initial focus", () => {
const focusedButton = $("#focusMe");
const btnOpenPopover = $("#btnPopFocus");