fix(ui5-popover): fix arrow placement when reaching a border (#3821)

Fixes: #3391
SAP · Sep 10, 2021 · 9913632 · 9913632
1 parent 521a9f5
commit 9913632
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -407,21 +407,21 @@ class Popover extends Popup {
 
 		let { arrowX, arrowY } = placement;
 
-		const popoverOnLeftBorder = this._left === 0;
-		const popoverOnRightBorder = this._left + popoverSize.width >= document.documentElement.clientWidth;
-		if (popoverOnLeftBorder) {
-			arrowX -= Popover.VIEWPORT_MARGIN;
-		} else if (popoverOnRightBorder) {
-			arrowX += Popover.VIEWPORT_MARGIN;
+		const popoverOnLeftBorderOffset = Popover.VIEWPORT_MARGIN - this._left;
+		const popoverOnRightBorderOffset = this._left + popoverSize.width + Popover.VIEWPORT_MARGIN - document.documentElement.clientWidth;
+		if (popoverOnLeftBorderOffset > 0) {
+			arrowX -= popoverOnLeftBorderOffset;
+		} else if (popoverOnRightBorderOffset > 0) {
+			arrowX += popoverOnRightBorderOffset;
 		}
 		this.arrowTranslateX = arrowX;
 
-		const popoverOnTopBorder = this._top === 0;
-		const popoverOnBottomBorder = this._top + popoverSize.height >= document.documentElement.clientHeight;
-		if (popoverOnTopBorder) {
-			arrowY -= Popover.VIEWPORT_MARGIN;
-		} else if (popoverOnBottomBorder) {
-			arrowY += Popover.VIEWPORT_MARGIN;
+		const popoverOnTopBorderOffset = Popover.VIEWPORT_MARGIN - this._top;
+		const popoverOnBottomBorderOffset = this._top + popoverSize.height + Popover.VIEWPORT_MARGIN - document.documentElement.clientHeight;
+		if (popoverOnTopBorderOffset > 0) {
+			arrowY -= popoverOnTopBorderOffset;
+		} else if (popoverOnBottomBorderOffset > 0) {
+			arrowY += popoverOnBottomBorderOffset;
 		}
 		this.arrowTranslateY = arrowY;
 

diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js
@@ -109,7 +109,7 @@ describe("Popover general interaction", () => {
 	it("tests if overflown content can be reached by scrolling (with header and arrow)", () => {
 		const bigPopover = $("#big-popover");
 		const items = bigPopover.$$("ui5-li");
-		const openBigPopoverButton = $("#big-popover-button")
+		const openBigPopoverButton = $("#big-popover-button");
 
 		openBigPopoverButton.click();