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
SAP · May 15, 2024 · 7ff177c · 7ff177c
1 parent 9f5d276
commit 7ff177c
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -4,16 +4,16 @@
 	min-height: 2rem;
 }
 
-:host([opened]) {
-	display: inline-block;
+:host([on-phone]) {
+	display: contents;
 }
 
 .ui5-responsive-popover-header {
 	height: var(--_ui5-responsive_popover_header_height);
 	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
@@ -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>