refactor(ui5-popover): test stacking context fix

SAP · Nov 16, 2023 · 86f1cad · 86f1cad
1 parent 0beb0a6
commit 86f1cad
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 23 deletions.
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -464,6 +464,9 @@ class Popover extends Popup {
 		this.arrowTranslateY = placement!.arrow.y;
 
 		top = this._adjustForIOSKeyboard(top);
+		const stackingContextOffset = this._getStackingContextOffset(left, top);
+		left -= stackingContextOffset.left;
+		top -= stackingContextOffset.top;
 
 		Object.assign(this.style, {
 			top: `${top}px`,
@@ -492,6 +495,23 @@ class Popover extends Popup {
 		return top + (Number.parseInt(this.style.top || "0") - actualTop);
 	}
 
+	_getStackingContextOffset(left: number, top: number) {
+		let parentNode = this.parentElement ? this.parentNode as HTMLElement : (this.parentNode as ShadowRoot).host as HTMLElement;
+
+		while (parentNode) {
+			const computedStyle = getComputedStyle(parentNode);
+
+			if (["size", "inline-size"].indexOf(computedStyle.containerType) > -1
+				|| computedStyle.transform !== "none") {
+				return parentNode.getBoundingClientRect();
+			}
+
+			parentNode = parentNode.parentElement ? parentNode.parentNode as HTMLElement : (parentNode.parentNode as ShadowRoot).host as HTMLElement;
+		}
+
+		return { left: 0, top: 0 };
+	}
+
 	getPopoverSize(): PopoverSize {
 		const rect = this.getBoundingClientRect(),
 			width = rect.width,

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -27,6 +27,37 @@
 <body class="popover2auto">
 	<iframe id="clickThisIframe" src="//localhost:8080"></iframe>
 
+	<ui5-tabcontainer>
+		<ui5-tab text="tab 1">
+			<ui5-button id="popbtn">Open Popover</ui5-button>
+
+			<ui5-popover placement-type="Bottom" hide-arrow id="danger">
+
+				<ui5-list>
+					<ui5-li>Hello</ui5-li>
+					<ui5-li>World</ui5-li>
+					<ui5-li>Again</ui5-li>
+				</ui5-list>
+
+				<br>
+				<br>
+
+				<ui5-button id="bigDanger">Super Danger !</ui5-button>
+
+				<ui5-popover id="bigDangerPop">
+					<ui5-list>
+						<ui5-li>Hello</ui5-li>
+						<ui5-li>World</ui5-li>
+						<ui5-li>Again</ui5-li>
+					</ui5-list>
+				</ui5-popover>
+			</ui5-popover>
+		</ui5-tab>
+		<ui5-tab text="tab 2">
+
+		</ui5-tab>
+	</ui5-tabcontainer>
+
 	<ui5-button id="btn">Click me !</ui5-button>
 
 	<ui5-popover id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
@@ -43,29 +74,9 @@
 		<br>
 		<br>
 
-		<ui5-button id="popbtn">Open Popover</ui5-button>
 
-		<ui5-popover placement-type="Bottom" hide-arrow id="danger">
 
-			<ui5-list>
-				<ui5-li>Hello</ui5-li>
-				<ui5-li>World</ui5-li>
-				<ui5-li>Again</ui5-li>
-			</ui5-list>
 
-			<br>
-			<br>
-
-			<ui5-button id="bigDanger">Super Danger !</ui5-button>
-
-			<ui5-popover id="bigDangerPop">
-				<ui5-list>
-					<ui5-li>Hello</ui5-li>
-					<ui5-li>World</ui5-li>
-					<ui5-li>Again</ui5-li>
-				</ui5-list>
-			</ui5-popover>
-		</ui5-popover>
 
 		<br>
 		<br>
@@ -395,7 +406,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 +426,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>
@@ -626,7 +637,7 @@ <h2>Horizontal Align</h2>
 
 		createAndRemove.addEventListener("click", function () {
 			var pop = document.createElement("ui5-popover");
-	
+
 			pop.setAttribute("open", true);
 			pop.setAttribute("opener", "createAndRemove");