fix(ui5-popover): don't close popover when click on opener iframe

packages/base/src/features/F6Navigation.ts

@@ -7,6 +7,7 @@ import isElementClickable from "../util/isElementClickable.js";
 import { getCurrentRuntimeIndex, compareRuntimes } from "../Runtimes.js";
 import getSharedResource from "../getSharedResource.js";
 import type OpenUI5Support from "./OpenUI5Support.js";
+import getParentElement from "../util/getParentElement.js";
 
 type F6Registry = {
 	instance?: F6Navigation,
@@ -198,18 +199,18 @@ class F6Navigation {
 				return closestScopeEl;
 			}
 
-			element = element.parentElement ? element.parentElement : (element.parentNode as ShadowRoot).host;
+			element = getParentElement(element);
 		}
 
 		return document.body;
 	}
 
 	setSelectedGroup(root: DocumentOrShadowRoot = window.document) {
 		const htmlElement = window.document.querySelector("html");
-		let element: Element | null | ParentNode = this.deepActive(root);
+		let element: Element | null = this.deepActive(root);
 
-		while (element && (element as Element).getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
-			element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
+		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
+			element = getParentElement(element);
 		}
 
 		this.selectedGroup = element as HTMLElement;

packages/base/src/util/getParentElement.ts

@@ -0,0 +1,5 @@
+const getParentElement = (element: Element) : Element | null => {
+	return element.parentElement ? element.parentElement : (element.parentNode as ShadowRoot).host;
+};
+
+export default getParentElement;

packages/main/cypress/specs/Popover.cy.tsx

@@ -264,6 +264,51 @@ describe("Popover interaction", () => {
 			// assert
 			cy.get("#pop").should("not.be.visible");
 		});
+
+		it("click on opener, which is iframe inside a custom element", () => {
+			cy.mount(
+				<>
+					<div id="myDiv" style="width: 200px;" tabindex="0">
+						<div id="helloId">Hello</div>
+						<div id="customElId" style="height: 200px;">
+						</div>
+					</div>
+					<Popover id="popoverId"
+							 opener="myDiv"
+							 headerText="Newsletter subscription"
+							 preventInitialFocus>
+						<div>
+							Content
+						</div>
+					</Popover>
+				</>
+			);
+
+			cy.get("#popoverId")
+				.invoke("prop", "open", "true");
+
+			cy.get("#popoverId")
+				.should("be.visible");
+
+			cy.get("#customElId").then($customEl => {
+				$customEl.get(0).attachShadow({mode: 'open'}).innerHTML =
+					`<iframe
+	sandbox
+	width="200"
+	height="200"
+	srcdoc="<div tabindex='0' id='contentId'>IFrame content</div>"
+></iframe>`;
+			});
+
+			cy.get("#myDiv")
+				.realClick({x: 100, y: 50});
+
+			// eslint-disable-next-line cypress/no-unnecessary-waiting
+			cy.wait(200);
+
+			cy.get("#popoverId")
+				.should("be.visible");
+		});
 	});
 });
 
@@ -416,4 +461,4 @@ describe("Events", () => {
 		cy.get("#popoverId")
 			.should("not.be.visible");
 	});
-});
+});

packages/main/src/popup-utils/PopoverRegistry.ts

@@ -1,6 +1,7 @@
 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 getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
 import type Popover from "../Popover.js";
 import { instanceOfPopover } from "../Popover.js";
 import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./OpenedPopupsRegistry.js";
@@ -21,8 +22,23 @@ const repositionPopovers = () => {
 };
 
 const closePopoversIfLostFocus = () => {
-	if (getActiveElement()!.tagName === "IFRAME") {
-		getRegistry().reverse().forEach(popup => popup.instance.closePopup(false, false, true));
+	let activeElement = getActiveElement();
+
+	if (activeElement!.tagName === "IFRAME") {
+		getRegistry().reverse().forEach(popup => {
+			const popover = popup.instance;
+			const opener = popover.getOpenerHTMLElement(popover.opener);
+
+			while (activeElement) {
+				if (activeElement === opener) {
+					return;
+				}
+
+				activeElement = getParentElement(activeElement);
+			}
+
+			popover.closePopup(false, false, true);
+		});
 	}
 };
 

packages/main/test/pages/PopoverIFrame.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="popover1auto">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Popover</title>
+
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN",
+			"libs": "sap.ui.webc.main"
+		}
+	</script>
+
+
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+	<script>
+		// delete Document.prototype.adoptedStyleSheets
+	</script>
+</head>
+
+<body class="popover2auto">
+	<div id="myDiv" style="width: 200px; border: 1px solid red;" tabindex="0">
+		<div id="helloId">Hello</div>
+		<div id="customElId">
+			<template shadowrootmode="open">
+				<iframe
+					sandbox
+					width="200"
+					height="200"
+					srcdoc="<p id='contentId'>IFrame content</p>"
+				></iframe>
+			</template>
+		</div>
+	</div>
+	<ui5-popover opener="myDiv" header-text="Newsletter subscription" prevent-initial-focus>
+		<div>
+			Content
+		</div>
+	</ui5-popover>
+
+	<script>
+		const popover = [...document.getElementsByTagName("ui5-popover")][0];
+		document.getElementById('myDiv').addEventListener("click", () => {
+			popover.open = true;
+		});
+	</script>
+</body>
+
+</html>