fix(ui5-date-picker): display initial view properly (#8977)

Fixes: #8893
SAP · May 17, 2024 · 5488f66 · 5488f66
1 parent f2b91a9
commit 5488f66
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 18 deletions.
diff --git a/packages/main/src/Calendar.hbs b/packages/main/src/Calendar.hbs
@@ -67,8 +67,8 @@
 			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"
 			@ui5-previous-press="{{onHeaderPreviousPress}}"
 			@ui5-next-press="{{onHeaderNextPress}}"
-			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-view="{{onHeaderShowYearPress}}"
 	></ui5-calendar-header>
 </div>
 

diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
@@ -196,8 +196,8 @@ type SpecialCalendarDateT = {
 	},
 })
 
-@event("show-month-press")
-@event("show-year-press")
+@event("show-month-view")
+@event("show-year-view")
 class Calendar extends CalendarPart {
 	/**
 	 * Defines the type of selection used in the calendar component.
@@ -421,7 +421,7 @@ class Calendar extends CalendarPart {
 	onHeaderShowMonthPress(e: CustomEvent) {
 		this._currentPickerDOM._autoFocus = false;
 		this._currentPicker = "month";
-		this.fireEvent("show-month-press", e);
+		this.fireEvent("show-month-view", e);
 	}
 
 	/**
@@ -430,7 +430,7 @@ class Calendar extends CalendarPart {
 	onHeaderShowYearPress(e: CustomEvent) {
 		this._currentPickerDOM._autoFocus = false;
 		this._currentPicker = "year";
-		this.fireEvent("show-year-press", e);
+		this.fireEvent("show-year-view", e);
 	}
 
 	get _currentPickerDOM() {
@@ -567,10 +567,12 @@ class Calendar extends CalendarPart {
 	_onkeydown(e: KeyboardEvent) {
 		if (isF4(e) && this._currentPicker !== "month") {
 			this._currentPicker = "month";
+			this.fireEvent("show-month-view", e);
 		}
 
 		if (isF4Shift(e) && this._currentPicker !== "year") {
 			this._currentPicker = "year";
+			this.fireEvent("show-year-view", e);
 		}
 	}
 

diff --git a/packages/main/src/CalendarHeader.ts b/packages/main/src/CalendarHeader.ts
@@ -36,8 +36,8 @@ type SecondaryCalendarButtonTexts = {
 })
 @event("next-press")
 @event("previous-press")
-@event("show-month-press")
-@event("show-year-press")
+@event("show-month-view")
+@event("show-year-view")
 class CalendarHeader extends UI5Element {
 	/**
 	 * Defines component's timestamp.
@@ -144,7 +144,7 @@ class CalendarHeader extends UI5Element {
 	}
 
 	onMonthButtonClick(e: MouseEvent) {
-		this.fireEvent("show-month-press", e);
+		this.fireEvent("show-month-view", e);
 	}
 
 	onMonthButtonKeyDown(e: KeyboardEvent) {
@@ -153,19 +153,19 @@ class CalendarHeader extends UI5Element {
 		}
 
 		if (isEnter(e)) {
-			this.fireEvent("show-month-press", e);
+			this.fireEvent("show-month-view", e);
 		}
 	}
 
 	onMonthButtonKeyUp(e: KeyboardEvent) {
 		if (isSpace(e)) {
 			e.preventDefault();
-			this.fireEvent("show-month-press", e);
+			this.fireEvent("show-month-view", e);
 		}
 	}
 
 	onYearButtonClick(e: MouseEvent) {
-		this.fireEvent("show-year-press", e);
+		this.fireEvent("show-year-view", e);
 	}
 
 	onYearButtonKeyDown(e: KeyboardEvent) {
@@ -174,14 +174,14 @@ class CalendarHeader extends UI5Element {
 		}
 
 		if (isEnter(e)) {
-			this.fireEvent("show-year-press", e);
+			this.fireEvent("show-year-view", e);
 		}
 	}
 
 	onYearButtonKeyUp(e: KeyboardEvent) {
 		if (isSpace(e)) {
 			e.preventDefault();
-			this.fireEvent("show-year-press", e);
+			this.fireEvent("show-year-view", e);
 		}
 	}
 

diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
@@ -45,8 +45,8 @@
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
 		@ui5-selected-dates-change="{{onSelectedDatesChange}}"
-		@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-		@ui5-show-year-press="{{onHeaderShowYearPress}}"
+		@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+		@ui5-show-year-view="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"
 		._currentPicker="{{_calendarCurrentPicker}}"
 		._pickersMode="{{_calendarPickersMode}}"

diff --git a/packages/main/src/DateTimePickerPopover.hbs b/packages/main/src/DateTimePickerPopover.hbs
@@ -25,8 +25,8 @@
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
-			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-view="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
 			._currentPicker="{{_calendarCurrentPicker}}"
 		>

diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
@@ -1369,4 +1369,30 @@ describe("Date Picker Tests", () => {
 		assert.ok(await monthPicker.getAttribute("hidden"));
 		assert.ok(await yearPicker.getAttribute("hidden"));
 	});
+
+	it("should open day picker view initially when open is triggered via keyboard", async () => {
+		datepicker.id = "#dpCalendarModeMonths";
+
+		await browser.keys("Escape");
+
+		const calendar = await datepicker.getCalendar();
+		const valueHelpIcon = await datepicker.getValueHelpIcon();
+		await valueHelpIcon.click();
+		let currentPicker = await calendar.getProperty("_currentPicker");
+
+		assert.ok(await datepicker.isPickerOpen(), "Datepicker is open");
+		assert.equal(currentPicker, "day", "calendar is opened on days");
+
+		await browser.keys("F4");
+		currentPicker = await calendar.getProperty("_currentPicker");
+		assert.equal(currentPicker, "month", "calendar is opened on months");
+
+		await browser.keys("Escape");
+		assert.notOk(await datepicker.isPickerOpen(), "Datepicker is closed");
+
+		await valueHelpIcon.click();
+		currentPicker = await calendar.getProperty("_currentPicker");
+		assert.ok(await datepicker.isPickerOpen(), "Datepicker is open");
+		assert.equal(currentPicker, "day", "calendar is opened on days");
+	});
 });