fix(ui5-popover): adjust top position when iOS keyboard is opened (#4333

)

Fixes: #3847

packages/base/src/Device.js

@@ -5,6 +5,7 @@ const chrome = !ie && /(Chrome|CriOS)/.test(ua);
 const safari = !ie && !chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(ua);
 const webkit = !ie && /webkit/.test(ua);
 const windows = navigator.platform.indexOf("Win") !== -1;
+const iOS = navigator.platform.match(/iPhone|iPad|iPod/) || (navigator.userAgent.match(/Mac/) && "ontouchend" in document);
 const android = !windows && /Android/.test(ua);
 const androidPhone = android && /(?=android)(?=.*mobile)/i.test(ua);
 const ipad = /ipad/i.test(ua);
@@ -95,6 +96,10 @@ const isCombi = () => {
 	return isTablet() && isDesktop();
 };
 
+const isIOS = () => {
+	return iOS;
+};
+
 export {
 	supportsTouch,
 	isIE,
@@ -104,4 +109,5 @@ export {
 	isTablet,
 	isDesktop,
 	isCombi,
+	isIOS,
 };

packages/main/src/Popover.js

@@ -1,4 +1,5 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
@@ -447,6 +448,8 @@ class Popover extends Popup {
 		}
 		this.arrowTranslateY = Math.round(arrowY);
 
+		top = this._adjustForIOSKeyboard(top);
+
 		Object.assign(this.style, {
 			top: `${top}px`,
 			left: `${left}px`,
@@ -458,6 +461,23 @@ class Popover extends Popup {
 		}
 	}
 
+	/**
+	 * Adjust the desired top position to compensate for shift of the screen
+	 * caused by opened keyboard on iOS which affects all elements with position:fixed.
+	 * @private
+	 * @param {int} top The target top in px.
+	 * @returns {int} The adjusted top in px.
+	 */
+	_adjustForIOSKeyboard(top) {
+		if (!isIOS()) {
+			return top;
+		}
+
+		const actualTop = Math.ceil(this.getBoundingClientRect().top);
+
+		return top + (parseInt(this.style.top || "0") - actualTop);
+	}
+
 	getPopoverSize() {
 		if (!this.opened) {
 			Object.assign(this.style, {

packages/main/test/pages/Dialog.html

@@ -446,7 +446,9 @@
 
 		window["dynamic-open"].addEventListener("click", function () {
 			var dialog = document.createElement("ui5-dialog"),
-				button = document.createElement("ui5-button");
+				button = document.createElement("ui5-button"),
+				separator = document.createElement("div")
+				input = document.createElement("ui5-input");
 
 			button.setAttribute("id", "dynamic-dialog-close-button");
 			button.appendChild(document.createTextNode("Close"));
@@ -457,6 +459,11 @@
 			dialog.setAttribute("id", "dynamic-dialog");
 			dialog.appendChild(button);
 
+			separator.style.height = "200px";
+			dialog.appendChild(separator);
+
+			dialog.appendChild(input);
+
 			document.body.appendChild(dialog);
 
 			dialog.show();