From 7ff177cd233bfdc6707499622200702c17043782 Mon Sep 17 00:00:00 2001
From: TeodorTaushanov <teodor.taushanov@sap.com>
Date: Wed, 15 May 2024 13:42:35 +0300
Subject: [PATCH] fix(ui5-responsive-popover): fix initially focused input
 going out of the viewport on iPhone (#8945)

* fix(ui5-responsive-popover): fix initially focused input going out of the viewport on iPhone

* chore: fix lint errors
---
 packages/main/src/Dialog.ts                   | 15 -----
 packages/main/src/Popup.ts                    | 26 ++++++++-
 packages/main/src/ResponsivePopover.ts        |  2 -
 .../main/src/themes/ResponsivePopover.css     |  6 +-
 .../main/test/pages/ResponsivePopover.html    | 57 ++++++++++++++++++-
 5 files changed, 81 insertions(+), 25 deletions(-)

diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts
index f78f6820dda0..2ff4877f7dc1 100644
--- a/packages/main/src/Dialog.ts
+++ b/packages/main/src/Dialog.ts
@@ -1,4 +1,3 @@
-import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
@@ -190,18 +189,6 @@ class Dialog extends Popup {
 	@property({ type: ValueState, defaultValue: ValueState.None })
 	state!: `${ValueState}`;
 
-	/**
-	 * @private
-	 */
-	@property({ type: Boolean })
-	onPhone!: boolean;
-
-	/**
-	 * @private
-	 */
-	@property({ type: Boolean })
-	onDesktop!: boolean;
-
 	_screenResizeHandler: () => void;
 	_dragMouseMoveHandler: (e: MouseEvent) => void;
 	_dragMouseUpHandler: (e: MouseEvent) => void;
@@ -365,8 +352,6 @@ class Dialog extends Popup {
 		super.onBeforeRendering();
 
 		this._isRTL = this.effectiveDir === "rtl";
-		this.onPhone = isPhone();
-		this.onDesktop = isDesktop();
 	}
 
 	onEnterDOM() {
diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
index d1c2919f0c8b..379c0551c27f 100644
--- a/packages/main/src/Popup.ts
+++ b/packages/main/src/Popup.ts
@@ -6,7 +6,12 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { isChrome, isSafari, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+	isChrome,
+	isSafari,
+	isDesktop,
+	isPhone,
+} from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
@@ -197,7 +202,19 @@ abstract class Popup extends UI5Element {
 	 * @public
 	 */
 	@slot({ type: HTMLElement, "default": true })
-	content!: Array<HTMLElement>
+	content!: Array<HTMLElement>;
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	onPhone!: boolean;
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	onDesktop!: boolean;
 
 	_resizeHandler: ResizeObserverCallback;
 	_shouldFocusRoot?: boolean;
@@ -215,6 +232,11 @@ abstract class Popup extends UI5Element {
 		};
 	}
 
+	onBeforeRendering() {
+		this.onPhone = isPhone();
+		this.onDesktop = isDesktop();
+	}
+
 	onAfterRendering() {
 		renderFinished().then(() => {
 			this._updateMediaRange();
diff --git a/packages/main/src/ResponsivePopover.ts b/packages/main/src/ResponsivePopover.ts
index 41484f03d378..2112fb92cc68 100644
--- a/packages/main/src/ResponsivePopover.ts
+++ b/packages/main/src/ResponsivePopover.ts
@@ -94,8 +94,6 @@ class ResponsivePopover extends Popover {
 	_show() {
 		if (!isPhone()) {
 			super._show();
-		} else {
-			this.style.display = "contents";
 		}
 	}
 
diff --git a/packages/main/src/themes/ResponsivePopover.css b/packages/main/src/themes/ResponsivePopover.css
index 5db71a5a5ad9..5b3c5b4ab8c0 100644
--- a/packages/main/src/themes/ResponsivePopover.css
+++ b/packages/main/src/themes/ResponsivePopover.css
@@ -4,8 +4,8 @@
 	min-height: 2rem;
 }
 
-:host([opened]) {
-	display: inline-block;
+:host([on-phone]) {
+	display: contents;
 }
 
 .ui5-responsive-popover-header {
@@ -13,7 +13,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	width:100%;
+	width: 100%;
 }
 
 .ui5-responsive-popover-header-text {
diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
index beee5bae0034..7bb03af3122b 100644
--- a/packages/main/test/pages/ResponsivePopover.html
+++ b/packages/main/test/pages/ResponsivePopover.html
@@ -37,12 +37,63 @@
 	</ui5-responsive-popover>
 
 	<!-- with header-text and footer slot-->
-	<ui5-responsive-popover id="respPopover2" header-text="Newsletter subscription for very long period of time">
+	<ui5-responsive-popover id="respPopover2"
+							initial-focus="emailInput2"
+							header-text="Newsletter subscription for very long period of time">
 		<div class="popover-content">
 			<ui5-label for="emailInput2" required>Email: </ui5-label>
-			<ui5-input id="emailInput2" class="samples-margin-top responsivepopover3auto"  placeholder="Enter Email"></ui5-input>
+			<ui5-input id="emailInput2" class="samples-margin-top responsivepopover3auto" placeholder="Enter Email"></ui5-input>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
+			<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+				That´s OpenUI5.</p>
 		</div>
-
 		<div slot="footer" class="popover-footer">
 			<ui5-label>You are already subscribed.</ui5-label>
 			<ui5-button id="btnClose2">Cancel</ui5-button>