Merge pull request #2053 from IgniteUI/dkamburov/fix-1918-19.2

Fix for 1918 - Try to fit the popover into containment area if possible

Author: Lipata

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 */

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;
+	});
 });