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

chore(ui5-popover): fix arrow position in RTL direction
SAP · Dec 10, 2024 · 04a4cfd · 04a4cfd
1 parent 6594706
commit 04a4cfd
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 1 deletion.
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -588,6 +588,8 @@ class Popover extends Popup {
 		const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
 		const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical, borderRadius);
 
+		this._left += this.getRTLCorrectionLeft();
+
 		return {
 			arrow: arrowPos,
 			top: this._top,
@@ -596,6 +598,10 @@ class Popover extends Popup {
 		};
 	}
 
+	getRTLCorrectionLeft() {
+		return parseFloat(window.getComputedStyle(this).left) - this.getBoundingClientRect().left;
+	}
+
 	/**
 	 * Calculates the position for the arrow.
 	 * @private

diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css
@@ -22,7 +22,8 @@
 	--_ui5-shellbar-notification-btn-count-offset: -0.125rem;
 }
 
-[dir="rtl"] {
+[dir="rtl"],
+[dir="rtl"] :host {
 	--_ui5_icon_transform_scale: scale(-1, 1);
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);
 	--_ui5_li_notification_group_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -499,6 +499,61 @@ <h2>Horizontal Align</h2>
 	<br>
 	<br>
 
+	<div dir="rtl" style="height: 420px; overflow-y: scroll;">
+		<div style="height: 100%; width: 100%">
+			<span>RTL sample with scrollbar</span>
+			<br>
+			<span> Popover placement Top</span>
+			<div class="centered-button">
+				<ui5-button id="btn1">Open</ui5-button>
+			</div>
+			<br>
+
+			<span> Popover placement Bottom</span>
+			<div class="centered-button">
+				<ui5-button id="btn2">Open</ui5-button>
+			</div>
+			<br>
+
+			<span> Popover placement Start</span>
+			<ui5-button id="btn3">Open</ui5-button>
+			<br>
+
+			<span> Popover placement End</span>
+			<ui5-button id="btn4">Open</ui5-button>
+
+			<div style="height: 200px;"></div>
+
+			<ui5-popover id="respPopover1" opener="btn1" placement-type="Top">
+				<div class="popover-content">
+					<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+				</div>
+			</ui5-popover>
+
+			<ui5-popover id="respPopover2" opener="btn2" placement-type="Bottom">
+				<div class="popover-content">
+					<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+				</div>
+			</ui5-popover>
+
+			<ui5-popover id="respPopover3" opener="btn3" placement-type="Left">
+				<div class="popover-content">
+					<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+				</div>
+			</ui5-popover>
+
+			<ui5-popover id="respPopover4" opener="btn4" placement-type="Right">
+				<div class="popover-content">
+					<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+				</div>
+			</ui5-popover>
+		</div>
+	</div>
+
+	<iframe src="./PopoverRTL.html"></iframe>
+
+	<div style="height: 100px;"></div>
+
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.showAt(btn);
@@ -744,6 +799,35 @@ <h2>Horizontal Align</h2>
 			document.getElementById("vertical").showAt(e.currentTarget);
 		});
 
+		const btn1 = document.getElementById("btn1");
+		const respPopover1 = document.getElementById("respPopover1");
+
+		const btn2 = document.getElementById("btn2");
+		const respPopover2 = document.getElementById("respPopover2");
+
+		const btn3 = document.getElementById("btn3");
+		const respPopover3 = document.getElementById("respPopover3");
+
+
+		const btn4 = document.getElementById("btn4");
+		const respPopover4 = document.getElementById("respPopover4");
+
+		btn1.addEventListener("click", () => {
+			respPopover1.open = !respPopover1.open;
+		});
+
+		btn2.addEventListener("click", () => {
+			respPopover2.open = !respPopover2.open;
+		});
+
+		btn3.addEventListener("click", () => {
+			respPopover3.open = !respPopover3.open;
+		});
+
+		btn4.addEventListener("click", () => {
+			respPopover4.open = !respPopover4.open;
+		});
+
 	</script>
 </body>
 

diff --git a/packages/main/test/pages/PopoverRTL.html b/packages/main/test/pages/PopoverRTL.html
@@ -0,0 +1,122 @@
+<!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%;
+	}
+
+	body {
+		padding-top: 100px;
+	}
+</style>
+
+<span> Popover placement Top</span>
+<div class="center">
+	<ui5-button id="btn1">Open</ui5-button>
+</div>
+<br>
+
+<span> Popover placement Bottom</span>
+<div class="center">
+	<ui5-button id="btn2">Open</ui5-button>
+</div>
+<br>
+
+<span> Popover placement Start</span>
+<ui5-button id="btn3">Open</ui5-button>
+<br>
+
+<ui5-button id="btn4">Open</ui5-button>
+<span> Popover placement End</span>
+
+<ui5-popover id="respPopover1" opener="btn1" placement-type="Top">
+	<div class="popover-content">
+		<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+	</div>
+</ui5-popover>
+
+<ui5-popover id="respPopover2" opener="btn2" placement-type="Bottom">
+	<div class="popover-content">
+		<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+	</div>
+</ui5-popover>
+
+<ui5-popover id="respPopover3" opener="btn3" placement-type="Left">
+	<div class="popover-content">
+		<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+	</div>
+</ui5-popover>
+
+<ui5-popover id="respPopover4" opener="btn4" placement-type="Right">
+	<div class="popover-content">
+		<ui5-label for="emailInput" required show-colon>Email</ui5-label>
+	</div>
+</ui5-popover>
+
+<div style="height: 200px;"></div>
+
+<script>
+	const btn1 = document.getElementById("btn1");
+	const respPopover1 = document.getElementById("respPopover1");
+
+	const btn2 = document.getElementById("btn2");
+	const respPopover2 = document.getElementById("respPopover2");
+
+	const btn3 = document.getElementById("btn3");
+	const respPopover3 = document.getElementById("respPopover3");
+
+
+	const btn4 = document.getElementById("btn4");
+	const respPopover4 = document.getElementById("respPopover4");
+
+
+	btn1.addEventListener("click", () => {
+		respPopover1.open = !respPopover1.open;
+	});
+
+	btn2.addEventListener("click", () => {
+		respPopover2.open = !respPopover2.open;
+	});
+
+	btn3.addEventListener("click", () => {
+		respPopover3.open = !respPopover3.open;
+	});
+
+	btn4.addEventListener("click", () => {
+		respPopover4.open = !respPopover4.open;
+	});
+</script>
+</body>
+
+</html>
diff --git a/packages/main/test/pages/styles/Popover.css b/packages/main/test/pages/styles/Popover.css
@@ -79,3 +79,20 @@ ui5-date-picker,
     justify-content: space-between;
 }
 
+
+#divOpenAndScroll {
+    height: 300px;
+    overflow: auto;
+    border: 1px solid red;
+}
+
+#divOpenAndScroll > div {
+    height: 2000px;
+}
+
+.centered-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}