fix(ui5-popover): fix arrow position in RTL direction

When the popover is inside iFrame in RTL direction and there is a scrollbar (in left) - the position of the popover (and its arrow) should be adjusted (moved to left with the size of the scrollbar). fixes: #9966
SAP · Oct 10, 2024 · 6f8ae26 · 6f8ae26
1 parent cd7e202
commit 6f8ae26
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 0 deletions.
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -619,6 +619,7 @@ class Popover extends Popup {
 	getArrowPosition(targetRect: DOMRect, popoverSize: PopoverSize, left: number, top: number, isVertical: boolean, borderRadius: number): ArrowPosition {
 		const horizontalAlign = this._actualHorizontalAlign;
 		let arrowXCentered = horizontalAlign === PopoverHorizontalAlign.Center || horizontalAlign === PopoverHorizontalAlign.Stretch;
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
 
 		if (horizontalAlign === PopoverHorizontalAlign.End && left <= targetRect.left) {
 			arrowXCentered = true;
@@ -631,6 +632,10 @@ class Popover extends Popup {
 		let arrowTranslateX = 0;
 		if (isVertical && arrowXCentered) {
 			arrowTranslateX = targetRect.left + targetRect.width / 2 - left - popoverSize.width / 2;
+
+			if (this.isInsideIframe() && this.isRTL() && this.hasVerticalScrollbar()) {
+				arrowTranslateX -= scrollbarWidth;
+			}
 		}
 
 		let arrowTranslateY = 0;
@@ -717,14 +722,31 @@ class Popover extends Popup {
 		return actualPlacement;
 	}
 
+	isInsideIframe() {
+		return window !== window.top;
+	}
+
+	isRTL() {
+		return document.documentElement.getAttribute("dir") === "rtl";
+	}
+
+	hasVerticalScrollbar() {
+        return  document.documentElement.scrollHeight > document.documentElement.clientHeight;
+	}
+
 	getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number {
 		const horizontalAlign = this._actualHorizontalAlign;
 		let left = Popover.VIEWPORT_MARGIN;
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
 
 		switch (horizontalAlign) {
 		case PopoverHorizontalAlign.Center:
 		case PopoverHorizontalAlign.Stretch:
 			left = targetRect.left - (popoverSize.width - targetRect.width) / 2;
+			if (this.isInsideIframe() && this.isRTL() && this.hasVerticalScrollbar()) {
+				left -= scrollbarWidth;
+			}
+
 			break;
 		case PopoverHorizontalAlign.Start:
 			left = targetRect.left;

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -531,6 +531,24 @@ <h2>Open and scroll</h2>
 	<br><br>
 	<br>
 
+	<div dir="rtl" style="height: 420px; overflow-y: scroll;">
+		<div style="height: 100%; width: 100%">
+			<span>RTL sample with scrollbar</span>
+			<br>
+			<div class="centered-button">
+				<ui5-button id="btnRTLScroll">Open</ui5-button>
+			</div>
+			<ui5-popover id="RTLScroll" placement="Bottom" horizontalAlign="Center" opener="btnRTLScroll">
+				<div>
+					<ui5-input/>
+				</div>
+			</ui5-popover>
+			<div style="height: 1000px;"></div>
+		</div>
+	</div>
+
+	<iframe src="./PopoverRTL.html"></iframe>
+
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.opener = btn;
@@ -844,6 +862,11 @@ <h2>Open and scroll</h2>
 			document.getElementById("vertical").open = true;
 		});
 
+		document.getElementById("btnRTLScroll").addEventListener("click", (e) => {
+			document.getElementById("RTLScroll").opener = e.currentTarget;
+			document.getElementById("RTLScroll").open = true;
+		});
+
 	</script>
 </body>
 

diff --git a/packages/main/test/pages/PopoverRTL.html b/packages/main/test/pages/PopoverRTL.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html dir="rtl">
+
+<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",
+			"rtl": true
+		}
+	</script>
+
+
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+
+	<link rel="stylesheet" type="text/css" href="./styles/Popover.css">
+
+	<script>
+		// delete Document.prototype.adoptedStyleSheets
+	</script>
+</head>
+
+<body>
+	<style>
+
+		.center {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			width: 100%;
+		}
+	</style>
+
+	<div class="center">
+		<ui5-button id="btn1">Open</ui5-button>
+	</div>
+
+	<ui5-responsive-popover id="respPopover1" opener="btn1" placement="Bottom" horizontalAlign="Center">
+		<div class="popover-content">
+			<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+		</div>
+	</ui5-responsive-popover>
+
+	<div style="height: 1000px;"></div>
+
+	<script>
+		const btn1 = document.getElementById("btn1");
+		const respPopover1 = document.getElementById("respPopover1");
+
+
+		btn1.addEventListener("click", () => {
+			respPopover1.open = !respPopover1.open;
+		});
+	</script>
+</body>
+
+</html>
diff --git a/packages/main/test/pages/styles/Popover.css b/packages/main/test/pages/styles/Popover.css
@@ -91,4 +91,12 @@ ui5-date-picker,
 
 #divOpenAndScroll > div {
     height: 2000px;
+}
+
+.centered-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
 }