From 20fd09cb642ef4035febab5f8aaf149cc7457e75 Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Tue, 20 Aug 2024 17:15:19 +0300
Subject: [PATCH] fix(ui5-timepicker): allow inputs popover on tablet (#9701)

fixes: #9705
---
 packages/main/src/TimePicker.ts         | 14 +++++++++-----
 packages/main/src/TimePickerPopover.hbs |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts
index 05298945c1ad..eba711b3a1e8 100644
--- a/packages/main/src/TimePicker.ts
+++ b/packages/main/src/TimePicker.ts
@@ -1,4 +1,4 @@
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop, isPhone, isTablet } from "@ui5/webcomponents-base/dist/Device.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
@@ -422,6 +422,10 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		return isPhone();
 	}
 
+	get _isMobileDevice() {
+		return !isDesktop() && (isPhone() || isTablet());
+	}
+
 	onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {
 		this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue
 	}
@@ -503,7 +507,7 @@ class TimePicker extends UI5Element implements IFormInputElement {
 			return;
 		}
 
-		if (this._isPhone && target && !target.hasAttribute("ui5-icon")) {
+		if (this._isMobileDevice && target && !target.hasAttribute("ui5-icon")) {
 			this.toggleInputsPopover();
 		}
 
@@ -559,7 +563,7 @@ class TimePicker extends UI5Element implements IFormInputElement {
 	}
 
 	_canOpenInputsPopover() {
-		return !this.disabled && this._isPhone;
+		return !this.disabled && this._isMobileDevice;
 	}
 
 	_getPopover() {
@@ -580,7 +584,7 @@ class TimePicker extends UI5Element implements IFormInputElement {
 	}
 
 	_onkeydown(e: KeyboardEvent) {
-		if (this._isPhone && !this.isInputsPopoverOpen()) {
+		if (this._isMobileDevice && !this.isInputsPopoverOpen()) {
 			e.preventDefault();
 		}
 		if (isShow(e)) {
@@ -710,7 +714,7 @@ class TimePicker extends UI5Element implements IFormInputElement {
 	}
 
 	_onfocusin(e: FocusEvent) {
-		if (this._isPhone) {
+		if (this._isMobileDevice) {
 			this._hideMobileKeyboard();
 			if (this._isInputsPopoverOpen) {
 				const popover = this._getInputsPopover();
diff --git a/packages/main/src/TimePickerPopover.hbs b/packages/main/src/TimePickerPopover.hbs
index 9349db992885..e19854a62ff9 100644
--- a/packages/main/src/TimePickerPopover.hbs
+++ b/packages/main/src/TimePickerPopover.hbs
@@ -29,7 +29,7 @@
 	</div>
 </ui5-responsive-popover>
 
-{{#if _isPhone}}
+{{#if _isMobileDevice}}
 <ui5-popover
 	id="{{_id}}-popover"
 	class="ui5-time-picker-inputs-popover"