fix(ui5-popup): fix(ui5-popup): hide block layer if popup is closed (#…

…2799)

The block layer is created when #getStaticAreaItemDomRef is called,
but the attribute "hidden" is not set at that time. Now it's set
on onEnterDOM hook, unless the popup is already opened.

Fixes: #2696

packages/main/src/Dialog.js

@@ -223,11 +223,15 @@ class Dialog extends Popup {
 	}
 
 	onEnterDOM() {
+		super.onEnterDOM();
+
 		ResizeHandler.register(this, this._screenResizeHandler);
 		ResizeHandler.register(document.body, this._screenResizeHandler);
 	}
 
 	onExitDOM() {
+		super.onExitDOM();
+
 		ResizeHandler.deregister(this, this._screenResizeHandler);
 		ResizeHandler.deregister(document.body, this._screenResizeHandler);
 	}

packages/main/src/Popup.js

@@ -56,7 +56,7 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the elements is open
+		 * Indicates if the element is open
 		 * @private
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -207,6 +207,19 @@ class Popup extends UI5Element {
 		return staticAreaStyles;
 	}
 
+	onEnterDOM() {
+		if (!this.isOpen()) {
+			this._blockLayerHidden = true;
+		}
+	}
+
+	onExitDOM() {
+		if (this.isOpen()) {
+			Popup.unblockBodyScrolling();
+			this._removeOpenedPopup();
+		}
+	}
+
 	get _displayProp() {
 		return "block";
 	}
@@ -432,13 +445,6 @@ class Popup extends UI5Element {
 		this.style.display = "none";
 	}
 
-	onExitDOM() {
-		if (this.isOpen()) {
-			Popup.unblockBodyScrolling();
-			this._removeOpenedPopup();
-		}
-	}
-
 	/**
 	 * Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property)
 	 *

packages/main/test/specs/Dialog.spec.js

@@ -127,6 +127,17 @@ describe("Dialog general interaction", () => {
 
 		closeButton.click();
 	});
+
+	it("test dialog overlay when dialog isn't open", () => {
+		const isBlockLayerHidden = browser.executeAsync(async (done) => {
+			const dialog = document.getElementById("dialog");
+			const staticAreaItemDomRef = await dialog.getStaticAreaItemDomRef();
+
+			done(staticAreaItemDomRef.querySelector(".ui5-block-layer").hasAttribute("hidden"));
+		});
+
+		assert.ok(isBlockLayerHidden, "the block layer is hidden");
+	});
 });