fix(ui5-popover): fix "containing block" position issue (#7870)

* fix(ui5-popover): fix containing block positioning issue

packages/base/src/util/getParentElement.ts

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

packages/base/src/util/isElementContainingBlock.ts

@@ -0,0 +1,12 @@
+const isElementContainingBlock = (el: HTMLElement) => {
+	const computedStyle = getComputedStyle(el);
+
+	return ["size", "inline-size"].indexOf(computedStyle.containerType) > -1
+		|| ["transform", "perspective"].indexOf(computedStyle.willChange) > -1
+		|| ["layout", "paint", "strict", "content"].indexOf(computedStyle.contain) > -1
+		|| computedStyle.transform !== "none"
+		|| computedStyle.perspective !== "none"
+		|| computedStyle.backdropFilter !== "none";
+};
+
+export default isElementContainingBlock;

packages/main/src/Dialog.ts

@@ -94,11 +94,12 @@ const ICON_PER_STATE: Record<ValueStateWithIcon, string> = {
  *
  * <code>import "@ui5/webcomponents/dist/Dialog";</code>
  *
- * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside <code>ui5-dialog</code>.
- * Ideally you should create all popups on the same level inside your HTML page and just open them from one another, rather than nesting them.
+ * <b>Note: </b> We recommend placing popup-like components (<code>ui5-dialog</code> and <code>ui5-popover</code>)
+ * outside any other components. Preferably, the popup-like components should be placed
+ * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
+ * the position and/or z-index management of the popup-like components.
  *
- * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside other components containing z-index.
- * This might break z-index management.
+ * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>).
  *
  * @constructor
  * @author SAP SE

packages/main/src/Popover.ts

@@ -7,6 +7,8 @@ import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
 import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
+import isElementContainingBlock from "@ui5/webcomponents-base/dist/util/isElementContainingBlock.js";
+import getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
 import Popup from "./Popup.js";
 import type { PopupBeforeCloseEventDetail as PopoverBeforeCloseEventDetail } from "./Popup.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
@@ -79,6 +81,13 @@ type CalculatedPlacement = {
  *
  * <code>import "@ui5/webcomponents/dist/Popover.js";</code>
  *
+ * <b>Note: </b> We recommend placing popup-like components (<code>ui5-dialog</code> and <code>ui5-popover</code>)
+ * outside any other components. Preferably, the popup-like components should be placed
+ * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
+ * the position and/or z-index management of the popup-like components.
+ *
+ * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>).
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.Popover
@@ -464,6 +473,9 @@ class Popover extends Popup {
 		this.arrowTranslateY = placement!.arrow.y;
 
 		top = this._adjustForIOSKeyboard(top);
+		const containingBlockClientLocation = this._getContainingBlockClientLocation();
+		left -= containingBlockClientLocation.left;
+		top -= containingBlockClientLocation.top;
 
 		Object.assign(this.style, {
 			top: `${top}px`,
@@ -492,6 +504,20 @@ class Popover extends Popup {
 		return top + (Number.parseInt(this.style.top || "0") - actualTop);
 	}
 
+	_getContainingBlockClientLocation() {
+		let parentElement = getParentElement(this);
+
+		while (parentElement) {
+			if (isElementContainingBlock(parentElement)) {
+				return parentElement.getBoundingClientRect();
+			}
+
+			parentElement = getParentElement(parentElement);
+		}
+
+		return { left: 0, top: 0 };
+	}
+
 	getPopoverSize(): PopoverSize {
 		const rect = this.getBoundingClientRect(),
 			width = rect.width,

packages/main/test/pages/Popover.html

@@ -26,7 +26,6 @@
 
 <body class="popover2auto">
 	<iframe id="clickThisIframe" src="//localhost:8080"></iframe>
-
 	<ui5-button id="btn">Click me !</ui5-button>
 
 	<ui5-popover id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
@@ -120,6 +119,24 @@
 	<br>
 	<br>
 
+	<div class="containingBlock">
+		<div>
+			Containing Block Div
+			<pre>
+container-type: inline-size;
+position: relative;
+z-index: 1;
+			</pre>
+		</div>
+		<ui5-button id="openPopoverInsideContainingBlockButton">Open Popover Inside a Containing Block</ui5-button>
+		<ui5-popover id="popoverInsideContainingBlock" placement-type="Bottom">
+			Popover<br>Inside<br>Containing<br>Block
+		</ui5-popover>
+	</div>
+
+	<br>
+	<br>
+
 	<ui5-button id="big-popover-button">
 		Open Big Popover
 	</ui5-button>
@@ -395,7 +412,7 @@
 	<ui5-button id="popoverFocusButton">Dialog Focus</ui5-button>
 	<ui5-popover id="popoverFocus">
 		<div slot="header">Header text</div>
-	
+
 		<div slot="footer" class="dialog-footer">
 			<div style="flex: 1"></div>
 			<ui5-button id="closeButton" design="Emphasized">Close</ui5-button>
@@ -415,7 +432,7 @@ <h2>Horizontal Align</h2>
 	<div>
 		<ui5-checkbox id="rtlCb" text="rtl"></ui5-checkbox>
 	</div>
-	
+
 	<div id="horizontalAlignContainer">
 		<div id="targetOpener" class="popover10auto">
 			<span>Target opener</span>
@@ -432,7 +449,6 @@ <h2>Horizontal Align</h2>
 	<span id="createAndRemoveResult" style="display: none;"></span>
 	<br>
 	<br>
-
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.showAt(btn);
@@ -626,7 +642,7 @@ <h2>Horizontal Align</h2>
 
 		createAndRemove.addEventListener("click", function () {
 			var pop = document.createElement("ui5-popover");
-	
+
 			pop.setAttribute("open", true);
 			pop.setAttribute("opener", "createAndRemove");
 
@@ -650,6 +666,10 @@ <h2>Horizontal Align</h2>
 			})
 		});
 
+		openPopoverInsideContainingBlockButton.addEventListener("click", function () {
+			popoverInsideContainingBlock.showAt(openPopoverInsideContainingBlockButton);
+		});
+
 	</script>
 </body>
 

packages/main/test/pages/styles/Popover.css

@@ -66,3 +66,10 @@ ui5-date-picker,
     height: 150px;
     width: 300px;
 }
+
+.containingBlock {
+	border: 1px solid black;
+	container-type: inline-size;
+	position: relative;
+	z-index: 1;
+}

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

@@ -82,6 +82,8 @@ describe("Popover general interaction", () => {
 		const btnOpenPopover = await browser.$("#btnQuickViewCardOpener");
 		const btnMoveFocus = await browser.$("#btnMoveFocus");
 
+		await btnOpenPopover.scrollIntoView();
+
 		// assert - the opener is visible
 		assert.strictEqual(await btnOpenPopover.isDisplayedInViewport(), true,
 			"Opener is available.");
@@ -474,7 +476,7 @@ describe("Horizontal Alignment", () => {
 		await browser.$("#horizontalAlignBtn").click();
 		const popover = await browser.$("#popoverHorizontalAlign");
 		const opener = await browser.$("#targetOpener");
-	
+
 		assert.ok(await isHorizontallyCentered(popover, opener), `Popover should be centered`);
 	});
 
@@ -492,7 +494,7 @@ describe("Horizontal Alignment", () => {
 		await browser.$("#horizontalAlignBtn").click();
 		const popover = await browser.$("#popoverHorizontalAlign");
 		const opener = await browser.$("#targetOpener");
-	
+
 		assert.ok(await isHorizontallyRightAligned(popover, opener), `Popover should be right aligned`);
 	});