fix(ui5-dialog): fix block layer of initially opened dialog (#9715)

fix(ui5-dialog): fix block layer of initially opened dialog
SAP · Aug 21, 2024 · 96544ef · 96544ef
1 parent 7894823
commit 96544ef
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 0 deletions.
diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
@@ -252,6 +252,10 @@ abstract class Popup extends UI5Element {
 		}
 
 		this.tabIndex = -1;
+
+		if (this.open) {
+			this.showPopover();
+		}
 	}
 
 	onExitDOM() {

diff --git a/packages/main/test/pages/DialogInitiallyOpen.html b/packages/main/test/pages/DialogInitiallyOpen.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<title>Dialog</title>
+
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN"
+		}
+	</script>
+
+	<script>
+		// delete Document.prototype.adoptedStyleSheets
+	</script>
+
+
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<script>
+		function init() {
+			const dialog = document.createElement("ui5-dialog");
+			dialog.id = "dialogOpen";
+			dialog.headerText = "Dialog Header";
+			dialog.open = true;
+
+			const content = document.createElement("div");
+			content.innerHTML = "<button>button</button>";
+			dialog.appendChild(content);
+
+			document.body.appendChild(dialog);
+		}
+	</script>
+</head>
+
+<body onload="init()">
+</body>
+
+</html>
diff --git a/packages/main/test/specs/Dialog.spec.js b/packages/main/test/specs/Dialog.spec.js
@@ -744,3 +744,13 @@ describe("Block layers", () => {
 		await browser.keys("Escape");
 	});
 });
+
+describe("Dialog initially open", () => {
+	before(async () => {
+		await browser.url(`test/pages/DialogInitiallyOpen.html`);
+	});
+
+	it("test :popover-open selector", async () => {
+		assert.ok(await browser.$("#dialogOpen").matches(":popover-open"), "popover is opened correctly");
+	});
+});