From d7752a5642c1504265180f531b517dcf99567a9b Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@infragistics.com>
Date: Wed, 26 Feb 2020 10:51:48 +0200
Subject: [PATCH] Fix for 1918 - Try to fit the popover into containment area
 if possible

---
 src/js/modules/infragistics.ui.popover.js    | 10 ++++-
 tests/unit/popover/specific/specific-test.js | 44 ++++++++++++++++++++
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/js/modules/infragistics.ui.popover.js b/src/js/modules/infragistics.ui.popover.js
index ff042b93e..1adf8a096 100644
--- a/src/js/modules/infragistics.ui.popover.js
+++ b/src/js/modules/infragistics.ui.popover.js
@@ -1083,7 +1083,7 @@
 		},
 		_rightPosition: function (trg) {
 			var right = $.ig.util.offset(trg).left + trg.outerWidth(),
-				parentRight = $.ig.util.offset(trg.offsetParent()).right + trg.outerWidth();
+				parentRight = $.ig.util.offset(trg.offsetParent()).left + trg.offsetParent().outerWidth();
 			if (right > parentRight) {
 				right = parentRight;
 			}
@@ -1103,7 +1103,7 @@
 			leftBoundary = win.scrollLeft();
 			topBoundary = win.scrollTop();
 			$containment = this.options.containment;
-			if (this.options.containment) {
+			if ($containment) {
 				if (leftBoundary < $.ig.util.offset($containment).left) {
 					leftBoundary = $.ig.util.offset($containment).left;
 				}
@@ -1130,6 +1130,12 @@
 				if (top < topBoundary) {
 					top = topBoundary;
 				}
+				/* Try to fit the popover within the contaiment if poosible */
+				if (this.oDir === "right" &&
+					$containment &&
+					left + trg.outerWidth() > rightBoundary) {
+						left = rightBoundary - trg.outerWidth();
+				}
 			}
 			/*D.K. 7 Apr 2015 Fix for bug #190611: When direction is right and mouse over the last column popover is shown to the cell on the left
 			When the direction is right, don't recalculate 'left', show it even if it is in the invisible area */
diff --git a/tests/unit/popover/specific/specific-test.js b/tests/unit/popover/specific/specific-test.js
index bd6aece80..ddec1199e 100644
--- a/tests/unit/popover/specific/specific-test.js
+++ b/tests/unit/popover/specific/specific-test.js
@@ -46,4 +46,48 @@ QUnit.test("Test popover when initialized on multiple items without ID on the pa
 		throw er;
 	});
 
+});
+
+//bug https://github.com/IgniteUI/ignite-ui/issues/1918
+QUnit.test("Test popover when containment, direction and position are specified", function (assert) {
+	var divElement = `<div id="containment">
+		<input id="right" placeholder="Focus me to show popover to the right" style="width:250px";/>
+	</div>`;
+	var self = this, done = assert.async(), popover;
+	this.testUtil.appendToFixture(divElement);
+	$('#containment').css({"background-color": "bisque",
+		width: "500px",
+		height: "400px",
+		margin: "50px 0 0 100px",
+		display: "flex",
+		"flex-flow": "column",
+		"align-items": "center",
+		"justify-content": "center"});
+	$("#right").igPopover({
+		containment: $('#containment'),
+		direction: "right",
+		position: "end",
+		height: 100,
+		width: 300,
+		showOn: 'focus',
+		closeOnBlur: true
+	});
+
+	this.testUtil.wait(200).then(function () {
+		$("#right").trigger("focus");
+		self.testUtil.wait(100).then(function () {
+			done();
+			popover = $('#right').data().igPopover.popover;
+			var containmentRect = $('#containment')[0].getBoundingClientRect();
+			assert.ok(popover.length > 0 && popover.closest(document.documentElement).length > 0 && popover.is(":visible"), "Popover element should exist and should be visible");
+			assert.ok(popover.position().left > containmentRect.left, "Popover is positioned correctly");
+			assert.ok(popover.position().left + popover.outherWidth() < containmentRect.right, "Popover is positioned correctly");
+			assert.ok(popover.position().top > containmentRect.top, "Popover is positioned correctly");
+			assert.ok(popover.position().top + popover.outherHeight() < containmentRect.bottom, "Popover is positioned correctly");
+		});
+	}).catch(function (er) {
+		assert.pushResult({ result: false, message: er.message });
+		done();
+		throw er;
+	});
 });
\ No newline at end of file