fix(ui5-popover): fix arrow horizontal position (#2129)

Fix Popover's arrow horizontal position, when horizontalPlacement is either "Left", or "Right". FIXES #2111
SAP · Nov 5, 2020 · ff430ca · ff430ca
1 parent 0db592f
commit ff430ca
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -489,7 +489,8 @@ class Popover extends Popup {
 
 		this._maxContentHeight = maxContentHeight;
 
-		const arrowTranslateX = isVertical ? targetRect.left + targetRect.width / 2 - left - popoverSize.width / 2 : 0;
+		const arrowXCentered = this.horizontalAlign === PopoverHorizontalAlign.Center || this.horizontalAlign === PopoverHorizontalAlign.Stretch;
+		const arrowTranslateX = isVertical && arrowXCentered ? targetRect.left + targetRect.width / 2 - left - popoverSize.width / 2 : 0;
 		const arrowTranslateY = !isVertical ? targetRect.top + targetRect.height / 2 - top - popoverSize.height / 2 : 0;
 
 		if (this._left === undefined || Math.abs(this._left - left) > 1.5) {

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -314,6 +314,49 @@
 		</ui5-list>
 	</ui5-popover>
 
+	<br>
+	<br>
+	<div id="targetOpener" style="height: 3rem; background: red;"></div>
+
+	<ui5-button id="btnOpenXLeft">Open Popup Left aligned</ui5-button>
+
+	<ui5-popover
+		header-text="My Heading"
+		id="popXLeft" horizontal-align="Left"
+		style="width: 300px">
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+		<div>
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+		<div>
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+	</ui5-popover>
+
+	<div id="targetOpener2" style="height: 3rem; background: yellow;"></div>
+
+	<ui5-button id="btnOpenXRight">Open Popup Right aligned</ui5-button>
+
+	<ui5-popover
+		header-text="My Heading"
+		id="popXRight" horizontal-align="Right"
+		style="width: 300px">
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+		<div>
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+		<div>
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+	</ui5-popover>
+
+	<br>
+	<br>
+
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.openBy(btn);
@@ -380,6 +423,12 @@
 
 			btnQuickViewCardOpener.setAttribute("hidden", true);
 		})
+		btnOpenXLeft.addEventListener("click", function (event) {
+			popXLeft.openBy(targetOpener);
+		});
+		btnOpenXRight.addEventListener("click", function (event) {
+			popXRight.openBy(targetOpener2);
+		});
 	</script>
 </body>