fix(ui5-popover): fix auto close when opener is outside the viewport (#4847)

Fixes #4716

Author: TeodorTaushanov

packages/main/src/Popover.js

@@ -390,6 +390,13 @@ class Popover extends Popup {
 			&& openerRect.right === 0;
 	}
 
+	isOpenerOutsideViewport(openerRect) {
+		return openerRect.bottom < 0
+			|| openerRect.top > window.innerHeight
+			|| openerRect.right < 0
+			|| openerRect.left > window.innerWidth;
+	}
+
 	/**
 	 * @override
 	 */
@@ -429,7 +436,7 @@ class Popover extends Popup {
 
 		const stretching = this.horizontalAlign === PopoverHorizontalAlign.Stretch;
 
-		if (this._preventRepositionAndClose) {
+		if (this._preventRepositionAndClose || this.isOpenerOutsideViewport(this._openerRect)) {
 			return this.close();
 		}
 

packages/main/test/specs/DatePicker.spec.js

@@ -851,6 +851,7 @@ describe("Date Picker Tests", () => {
 
 		const root = await datepicker.getRoot();
 		await root.keys("Escape");
+		await browser.$("#dp33").scrollIntoView();
 		await datepicker.openPicker();
 
 		const displayedDay = await datepicker.getDisplayedDay(15);

packages/main/test/specs/DateTimePicker.spec.js

@@ -1,46 +1,48 @@
 const assert = require("chai").assert;
 const PORT = require("./_port.js");
 
-const openPickerById = (id, options) => {
+const openPickerById = async (id, options) => {
+	await browser.$(`#${id}`).scrollIntoView();
+
 	return browser.executeAsync((id, options, done) => {
 		done(document.querySelector(`#${id}`).openPicker(options));
 	}, id, options);
-}
+};
 
 const closePickerById = id => {
 	return browser.executeAsync((id, done) => {
 		done(document.querySelector(`#${id}`).closePicker());
 	}, id);
-}
+};
 
 const isPickerOpen = id => {
 	return browser.executeAsync((id, done) => {
 		done(document.querySelector(`#${id}`).isOpen());
 	}, id);
-}
+};
 
 const getPicker = async id => {
 	const staticAreaItemClassName = await browser.getStaticAreaItemClassName(`#${id}`);
 	return browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
-}
+};
 
 const getSubmitButton = async id => {
 	const picker = await getPicker(id);
 	return picker.$("#ok");
-}
+};
 
 const getCancelButton = async id => {
 	const picker = await getPicker(id);
 	return picker.$("#cancel");
-}
+};
 
 const getTimeSlidersCount = async id => {
 	const picker = await getPicker(id);
 
 	return await browser.executeAsync( (picker, done) => {
 		done(picker.querySelector("ui5-time-selection").shadowRoot.querySelectorAll("ui5-wheelslider").length);
 	}, picker);
-}
+};
 
 describe("DateTimePicker general interaction", () => {
 	before(async () => {

packages/main/test/specs/Popover.spec.js

@@ -63,6 +63,21 @@ describe("Popover general interaction", () => {
 		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
 	});
 
+	it("tests if popover auto closes when opener goes out of the viewport", async () => {
+		const btnOpenPopover = await browser.$("#btnOpenWithAttr");
+		const btnAccNameRef = await browser.$("#btnAccNameRef");
+
+		await btnOpenPopover.click();
+
+		const popover = await browser.$("#popoverAttr");
+		assert.ok(await popover.isDisplayedInViewport(), "Popover is opened.");
+
+		await btnAccNameRef.scrollIntoView();
+		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
+
+		await browser.$("#btn").scrollIntoView();
+	});
+
 	it("tests popover does not close with opener", async () => {
 		const popover = await browser.$("#quickViewCard");
 		const btnOpenPopover = await browser.$("#btnQuickViewCardOpener");