feat(ui5-date-picker): component is now aligned with the specification (#2304)

Focus handling is aligned with the KBH specification:

When an year is selected from the year picker the day picker is shown and focus
is set to the last selected date or to the current date.
When a month is selected from the month picker the day picker is shown and focus
is set to the last selected date or to the current date.
When month picker is opened the focus is set to the selected month or to the current month
if there are no selected dates.
When year picker is opened the focus is set to the selected year or to the current year
if there are no selected dates.
Selection is applied in compliance with the UX specification, when a picker is opened:

Calendar items from the month picker and year picker are not rendered selected, when there are no
selected dates.
Fixes #2151

Author: unazko

packages/main/src/Calendar.js

@@ -421,6 +421,8 @@ class Calendar extends UI5Element {
 	_handleSelectedDatesChange(event) {
 		this.selectedDates = [...event.detail.dates];
 
+		this.timestamp = this.selectedDates[0];
+
 		this.fireEvent("selected-dates-change", { dates: event.detail.dates });
 	}
 
@@ -438,21 +440,6 @@ class Calendar extends UI5Element {
 		}
 	}
 
-	_handleSelectedMonthChange(event) {
-		const oNewDate = this._calendarDate;
-		const newMonthIndex = CalendarDate.fromTimestamp(
-			event.detail.timestamp * 1000,
-			this._primaryCalendarType
-		).getMonth();
-
-		oNewDate.setMonth(newMonthIndex);
-		this.timestamp = oNewDate.valueOf() / 1000;
-
-		this._hideMonthPicker();
-
-		this._focusFirstDayOfMonth(oNewDate);
-	}
-
 	_focusFirstDayOfMonth(targetDate) {
 		let fistDayOfMonthIndex = -1;
 
@@ -469,19 +456,35 @@ class Calendar extends UI5Element {
 		dayPicker._itemNav.focusCurrent();
 	}
 
+	_handleSelectedMonthChange(event) {
+		const oNewDate = this._calendarDate;
+		const oFocusedDate = CalendarDate.fromTimestamp(event.detail.timestamp * 1000, this._primaryCalendarType);
+
+		oNewDate.setMonth(oFocusedDate.getMonth());
+		this.timestamp = oNewDate.valueOf() / 1000;
+		this._monthPicker.timestamp = this.timestamp;
+
+		this._hideMonthPicker();
+		this._setDayPickerCurrentIndex(oNewDate);
+	}
+
 	_handleSelectedYearChange(event) {
-		const oNewDate = CalendarDate.fromTimestamp(
-			event.detail.timestamp * 1000,
-			this._primaryCalendarType
-		);
-		oNewDate.setMonth(0);
-		oNewDate.setDate(1);
+		const oNewDate = this._calendarDate;
+		const oFocusedDate = CalendarDate.fromTimestamp(event.detail.timestamp * 1000, this._primaryCalendarType);
 
+		oNewDate.setYear(oFocusedDate.getYear());
 		this.timestamp = oNewDate.valueOf() / 1000;
+		this._yearPicker.timestamp = this.timestamp;
 
 		this._hideYearPicker();
+		this._setDayPickerCurrentIndex(oNewDate);
+	}
 
-		this._focusFirstDayOfMonth(oNewDate);
+	_setDayPickerCurrentIndex(calDate) {
+		const currentDate = new CalendarDate(calDate);
+		const dayPicker = this.shadowRoot.querySelector("[ui5-daypicker]");
+		const currentDateIndex = dayPicker._getVisibleDays(currentDate).findIndex(date => date.valueOf() === currentDate.valueOf());
+		dayPicker._itemNav.currentIndex = currentDateIndex;
 	}
 
 	_handleMonthButtonPress() {
@@ -565,11 +568,9 @@ class Calendar extends UI5Element {
 			}
 		});
 
-		const weekDaysCount = 7;
-
 		if (lastDayOfMonthIndex !== -1) {
 			// find the DOM for the last day index
-			const lastDay = dayPicker.shadowRoot.querySelector(".ui5-dp-content").children[parseInt(lastDayOfMonthIndex / weekDaysCount) + 1].children[(lastDayOfMonthIndex % weekDaysCount)];
+			const lastDay = dayPicker.shadowRoot.querySelectorAll(".ui5-dp-content .ui5-dp-item")[lastDayOfMonthIndex];
 
 			// update current item in ItemNavigation
 			dayPicker._itemNav.current = lastDayOfMonthIndex;
@@ -675,6 +676,14 @@ class Calendar extends UI5Element {
 
 		this._calendarWidth = calendarRect.width.toString();
 		this._calendarHeight = calendarRect.height.toString();
+
+		const monthPicker = this.shadowRoot.querySelector("[ui5-monthpicker]");
+		monthPicker._selectedDates = [...this.selectedDates];
+		const currentMonthIndex = monthPicker._itemNav._getItems().findIndex(item => {
+			const calDate = CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000, this._primaryCalendarType);
+			return calDate.getMonth() === this._calendarDate.getMonth();
+		});
+		monthPicker._itemNav.currentIndex = currentMonthIndex;
 		this._header._isMonthButtonHidden = true;
 	}
 
@@ -691,6 +700,14 @@ class Calendar extends UI5Element {
 
 		this._calendarWidth = calendarRect.width.toString();
 		this._calendarHeight = calendarRect.height.toString();
+
+		const yearPicker = this.shadowRoot.querySelector("[ui5-yearpicker]");
+		yearPicker._selectedDates = [...this.selectedDates];
+		const currentYearIndex = yearPicker._itemNav._getItems().findIndex(item => {
+			const calDate = CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000, this._primaryCalendarType);
+			return calDate.getYear() === this._calendarDate.getYear();
+		});
+		yearPicker._itemNav.currentIndex = currentYearIndex;
 	}
 
 	_hideMonthPicker() {

packages/main/src/DatePicker.js

@@ -25,6 +25,7 @@ import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
 import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_ACC_TEXT, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
@@ -419,14 +420,16 @@ class DatePicker extends UI5Element {
 					calendar._hideYearPicker();
 				}
 			},
-			afterOpen: () => {
+			afterOpen: async () => {
+				await RenderScheduler.whenFinished();
 				const calendar = this.calendar;
 
 				if (!calendar) {
 					return;
 				}
 
 				const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
+				dayPicker._inputLiveChangeTrigger = false;
 				const selectedDay = dayPicker.shadowRoot.querySelector(".ui5-dp-item--selected");
 				const today = dayPicker.shadowRoot.querySelector(".ui5-dp-item--now");
 				let focusableDay = selectedDay || today;
@@ -666,6 +669,15 @@ class DatePicker extends UI5Element {
 		const emptyValue = nextValue === "";
 		const isValid = emptyValue || this._checkValueValidity(nextValue);
 
+		if (this.responsivePopover) {
+			const calendar = this.calendar;
+			const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
+			// If day picker component rerendering is triggered due to a change in the date picker component input filed,
+			// then mark this trigger and avoid moving the focus from the date picker input field throughout the on after
+			// rendering hook of the day picker component
+			dayPicker._inputLiveChangeTrigger = true;
+		}
+
 		this.value = nextValue;
 		this.fireEvent("input", { value: nextValue, valid: isValid });
 	}

packages/main/src/DayPicker.js

@@ -389,6 +389,11 @@ class DayPicker extends UI5Element {
 
 	onAfterRendering() {
 		this._fireDayPickerRendered();
+		if (this._inputLiveChangeTrigger) {
+			this._inputLiveChangeTrigger = false;
+		} else {
+			this._itemNav.focusCurrent();
+		}
 	}
 
 	_onmousedown(event) {

packages/main/src/MonthPicker.js

@@ -64,6 +64,11 @@ const metadata = {
 			type: String,
 		},
 
+		_selectedDates: {
+			type: Integer,
+			multiple: true,
+		},
+
 		_quarters: {
 			type: Object,
 			multiple: true,
@@ -160,27 +165,31 @@ class MonthPicker extends UI5Element {
 			ItemNavigation.BORDER_REACH,
 			this._handleItemNavigationBorderReach.bind(this)
 		);
+
+		this._selectedDates = [];
 	}
 
 	onBeforeRendering() {
 		const localeData = getCachedLocaleDataInstance(getLocale());
 
 		const quarters = [];
-		const oCalDate = CalendarDate.fromTimestamp(new Date().getTime(), this._primaryCalendarType);
+		const oCalDate = this._calendarDate;
 		let timestamp;
 
+		/* eslint-disable no-loop-func */
 		for (let i = 0; i < 12; i++) {
 			oCalDate.setMonth(i);
 			timestamp = oCalDate.valueOf() / 1000;
 
 			const month = {
 				timestamp: timestamp.toString(),
 				id: `${this._id}-m${i}`,
+				selected: this._selectedDates.some(d => d === timestamp),
 				name: localeData.getMonths("wide", this._primaryCalendarType)[i],
 				classes: "ui5-mp-item",
 			};
 
-			if (this._month === i) {
+			if (month.selected) {
 				month.classes += " ui5-mp-item--selected";
 			}
 
@@ -233,8 +242,8 @@ class MonthPicker extends UI5Element {
 	_onmousedown(event) {
 		if (event.target.className.indexOf("ui5-mp-item") > -1) {
 			const targetTimestamp = this.getTimestampFromDOM(event.target);
-			const focusedItem = this._itemNav._getItems().find(item => parseInt(item.timestamp) === targetTimestamp);
-			this._itemNav.currentIndex = this._itemNav._getItems().indexOf(focusedItem);
+			const focusedItemIndex = this._itemNav._getItems().findIndex(item => parseInt(item.timestamp) === targetTimestamp);
+			this._itemNav.currentIndex = focusedItemIndex;
 			this._itemNav.focusCurrent();
 		}
 	}

packages/main/src/YearPicker.js

@@ -66,6 +66,11 @@ const metadata = {
 			defaultValue: undefined,
 		},
 
+		_selectedDates: {
+			type: Integer,
+			multiple: true,
+		},
+
 		_selectedYear: {
 			type: Integer,
 			noAttribute: true,
@@ -165,6 +170,7 @@ class YearPicker extends UI5Element {
 		);
 
 		this._yearIntervals = [];
+		this._selectedDates = [];
 	}
 
 	onBeforeRendering() {
@@ -190,6 +196,7 @@ class YearPicker extends UI5Element {
 			this._selectedYear = this._year;
 		}
 
+		/* eslint-disable no-loop-func */
 		for (let i = 0; i < YearPicker._ITEMS_COUNT; i++) {
 			const intervalIndex = parseInt(i / 4);
 			if (!intervals[intervalIndex]) {
@@ -203,11 +210,15 @@ class YearPicker extends UI5Element {
 			const year = {
 				timestamp: timestamp.toString(),
 				id: `${this._id}-y${timestamp}`,
+				selected: this._selectedDates.some(itemTimestamp => {
+					const date = CalendarDate.fromTimestamp(itemTimestamp * 1000, this._primaryCalendarType);
+					return date.getYear() === oCalDate.getYear();
+				}),
 				year: oYearFormat.format(oCalDate.toLocalJSDate()),
 				classes: "ui5-yp-item",
 			};
 
-			if (oCalDate.getYear() === this._selectedYear) {
+			if (year.selected) {
 				year.classes += " ui5-yp-item--selected";
 			}
 
@@ -256,8 +267,8 @@ class YearPicker extends UI5Element {
 	_onmousedown(event) {
 		if (event.target.className.indexOf("ui5-yp-item") > -1) {
 			const targetTimestamp = this.getTimestampFromDom(event.target);
-			const focusedItem = this._itemNav._getItems().find(item => parseInt(item.timestamp) === targetTimestamp);
-			this._itemNav.currentIndex = this._itemNav._getItems().indexOf(focusedItem);
+			const focusedItemIndex = this._itemNav._getItems().findIndex(item => parseInt(item.timestamp) === targetTimestamp);
+			this._itemNav.currentIndex = focusedItemIndex;
 			this._itemNav.focusCurrent();
 		}
 	}
@@ -413,7 +424,7 @@ class YearPicker extends UI5Element {
 }
 
 YearPicker._ITEMS_COUNT = 20;
-YearPicker._MIDDLE_ITEM_INDEX = 7;
+YearPicker._MIDDLE_ITEM_INDEX = 10;
 
 YearPicker.define();