diff --git a/packages/main/src/popup-utils/PopoverRegistry.ts b/packages/main/src/popup-utils/PopoverRegistry.ts
index 51844c403ece..19c23ccdd5ba 100644
--- 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.closePopup(false, false, true));
}
};
diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
index 0626e6654132..36033d81d6b0 100644
--- a/packages/main/test/pages/Popover.html
+++ b/packages/main/test/pages/Popover.html
@@ -26,6 +26,12 @@
+
+
+ I'm in the shadow DOM
+
+
+
Click me !
diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js
index 75e8894a4b82..1217b340a77c 100644
--- a/packages/main/test/specs/Popover.spec.js
+++ b/packages/main/test/specs/Popover.spec.js
@@ -366,6 +366,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();