fix(ui5-popover): fix auto close when click on iframe inside a shadow root (#8968)

TeodorTaushanov · web-flow · commit 39835ba2dfa1 · 2024-05-17T15:27:50.000+03:00
Fixes #8959 Fixes #7994
diff --git a/packages/main/src/popup-utils/PopoverRegistry.ts b/packages/main/src/popup-utils/PopoverRegistry.ts
@@ -1,5 +1,6 @@
 import { isClickInRect } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import type { Interval } from "@ui5/webcomponents-base/dist/types.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import type Popover from "../Popover.js";
 import { instanceOfPopover } from "../Popover.js";
 import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./OpenedPopupsRegistry.js";
@@ -20,7 +21,7 @@ const repositionPopovers = () => {
 };
 
 const closePopoversIfLostFocus = () => {
-	if (document.activeElement!.tagName === "IFRAME") {
+	if (getActiveElement()!.tagName === "IFRAME") {
 		getRegistry().reverse().forEach(popup => popup.instance.close(false, false, true));
 	}
 };
diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -26,6 +26,12 @@
 
 <body class="popover2auto">
 	<iframe id="clickThisIframe" src="//localhost:8080"></iframe>
+	<div id="host">
+		<template shadowrootmode="open">
+			<span>I'm in the shadow DOM</span>
+			<iframe id="clickThisIframeInsideShadowRoot" src="//localhost:8080"></iframe>
+		</template>
+	</div>
 	<ui5-button id="btn">Click me !</ui5-button>
 
 	<ui5-popover id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js
@@ -363,6 +363,20 @@ describe("Popover general interaction", () => {
 		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
 	});
 
+	it("tests clicking on an iframe inside a shadow root closes the popover", async () => {
+		const btnOpenPopover = await browser.$("#btn");
+		await btnOpenPopover.click();
+
+		const popover = await browser.$("#pop");
+		const iframe = await browser.$("#host").shadow$("#clickThisIframeInsideShadowRoot");
+
+		assert.ok(await popover.isDisplayedInViewport(), "Popover is opened.");
+
+		await iframe.click();
+
+		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
+	});
+
 	it("Test initial focus when content is provided after the header and footer", async () => {
 		const listContainerItem = await browser.$("#popoverFocusButton");
 		await listContainerItem.scrollIntoView();
