fix(ui5-datetime-picker): show time picker after date selection (#11548)

The `ui5-datetime-picker` now shows the time selection clocks after a date is chosen from the calendar on small screens.

Fixes: #11378

Author: didip1000

packages/main/src/DateTimePicker.ts

@@ -37,6 +37,9 @@ import DateTimePickerTemplate from "./DateTimePickerTemplate.js";
 import DateTimePickerCss from "./generated/themes/DateTimePicker.css.js";
 import DateTimePickerPopoverCss from "./generated/themes/DateTimePickerPopover.css.js";
 import CalendarPickersMode from "./types/CalendarPickersMode.js";
+import type TimeSelectionClocks from "./TimeSelectionClocks.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import { renderFinished } from "@ui5/webcomponents-base";
 
 const PHONE_MODE_BREAKPOINT = 640; // px
 
@@ -147,6 +150,9 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
 	@property({ type: Object })
 	_previewValues: PreviewValues = {};
 
+	@query("[ui5-time-selection-clocks]")
+	_clocks!: TimeSelectionClocks;
+
 	_handleResizeBound: ResizeObserverCallback;
 
 	constructor() {
@@ -275,7 +281,7 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
 	/**
 	 * @override
 	 */
-	onSelectedDatesChange(e: CustomEvent<CalendarSelectionChangeEventDetail>) {
+	async onSelectedDatesChange(e: CustomEvent<CalendarSelectionChangeEventDetail>) {
 		e.preventDefault();
 		// @ts-ignore Needed for FF
 		const dateTimePickerContent = e.path ? e.path[1] : e.composedPath()[1];
@@ -285,6 +291,14 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
 			calendarValue: e.detail.selectedValues[0],
 			timeSelectionValue: dateTimePickerContent.lastChild.value,
 		};
+		this._showTimeView = true;
+
+		if (this.showDateView) {
+			return;
+		}
+
+		await renderFinished();
+		this._clocks.focus();
 	}
 
 	onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {

packages/main/src/TimeSelectionClocksTemplate.tsx

@@ -19,6 +19,7 @@ export default function TimeSelectionClocksTemplate(this: TimeSelectionClocks) {
 					<>
 						{ entity.hasSeparator && <span class="ui5-time-selection-separator">:</span> }
 						<ToggleSpinButton
+							data-sap-focus-ref
 							id={`${this._id}_button_${entity.entity}`}
 							data-ui5-clock={entity.entity}
 							valueMin={entity.attributes && entity.attributes.min}