fix(ui5-calendar): remove auto-focus logic in onAfterRendering() hook

Author: hinzzx

packages/main/src/Calendar.ts

@@ -49,12 +49,11 @@ import CalendarHeaderCss from "./generated/themes/CalendarHeader.css.js";
 import { CALENDAR_HEADER_NEXT_BUTTON, CALENDAR_HEADER_PREVIOUS_BUTTON } from "./generated/i18n/i18n-defaults.js";
 import type { YearRangePickerChangeEventDetail } from "./YearRangePicker.js";
 
-interface ICalendarPicker {
-	_showPreviousPage: () => void,
-	_showNextPage: () => void,
+interface ICalendarPicker extends HTMLElement {
+	_showPreviousPage: () => void | Promise<void>,
+	_showNextPage: () => void | Promise<void>,
 	_hasPreviousPage: () => boolean,
 	_hasNextPage: () => boolean,
-	_autoFocus?: boolean,
 	_currentYearRange?: CalendarYearRangeT,
 }
 
@@ -335,6 +334,15 @@ class Calendar extends CalendarPart {
 		this._valueIsProcessed = false;
 	}
 
+	async _focusCurrentPicker() {
+		await renderFinished();
+		this._currentPickerDOM.focus();
+	}
+
+	async _onfocusin() {
+		await this._focusCurrentPicker();
+	}
+
 	/**
 	 * @private
 	 */
@@ -465,7 +473,6 @@ class Calendar extends CalendarPart {
 		if (defaultTypes.includes(this._selectedItemType)) {
 			this._selectedItemType = "None"; // In order to avoid filtering of default types
 		}
-		this._currentPickerDOM._autoFocus = false;
 	}
 
 	/**
@@ -524,40 +531,40 @@ class Calendar extends CalendarPart {
 	/**
 	 * The user clicked the "month" button in the header
 	 */
-	onHeaderShowMonthPress() {
-		this.showMonth();
+	async onHeaderShowMonthPress() {
+		await this.showMonth();
 		this.fireDecoratorEvent("show-month-view");
 	}
 
-	showMonth() {
-		this._currentPickerDOM._autoFocus = false;
+	async showMonth() {
 		this._currentPicker = "month";
+		await this._focusCurrentPicker();
 	}
 
 	/**
 	 * The user clicked the "year" button in the header
 	 */
-	onHeaderShowYearPress() {
-		this.showYear();
+	async onHeaderShowYearPress() {
+		await this.showYear();
 		this.fireDecoratorEvent("show-year-view");
 	}
 
-	showYear() {
-		this._currentPickerDOM._autoFocus = false;
+	async showYear() {
 		this._currentPicker = "year";
+		await this._focusCurrentPicker();
 	}
 
 	/**
 	 * The user clicked the "year range" button in the YearPicker header
 	 */
-	onHeaderShowYearRangePress() {
-		this.showYearRange();
+	async onHeaderShowYearRangePress() {
+		await this.showYearRange();
 		this.fireDecoratorEvent("show-year-range-view");
 	}
 
-	showYearRange() {
-		this._currentPickerDOM._autoFocus = false;
+	async showYearRange() {
 		this._currentPicker = "yearrange";
+		await this._focusCurrentPicker();
 	}
 
 	get _currentPickerDOM() {
@@ -570,21 +577,13 @@ class Calendar extends CalendarPart {
 	 */
 	onHeaderPreviousPress() {
 		this._currentPickerDOM._showPreviousPage();
-
-		if (this.calendarLegend) {
-			this._currentPickerDOM._autoFocus = true;
-		}
 	}
 
 	/**
 	 * The year clicked the "Next" button in the header
 	 */
 	onHeaderNextPress() {
 		this._currentPickerDOM._showNextPage();
-
-		if (this.calendarLegend) {
-			this._currentPickerDOM._autoFocus = true;
-		}
 	}
 
 	_setSecondaryCalendarTypeButtonText() {
@@ -710,40 +709,40 @@ class Calendar extends CalendarPart {
 		this._fireEventAndUpdateSelectedDates(e.detail.dates);
 	}
 
-	onSelectedMonthChange(e: CustomEvent<MonthPickerChangeEventDetail>) {
+	async onSelectedMonthChange(e: CustomEvent<MonthPickerChangeEventDetail>) {
 		this.timestamp = e.detail.timestamp;
 
 		if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
 			this._currentPicker = "day";
+			await this._focusCurrentPicker();
 		} else {
 			this._fireEventAndUpdateSelectedDates(e.detail.dates);
 		}
-
-		this._currentPickerDOM._autoFocus = true;
 	}
 
-	onSelectedYearChange(e: CustomEvent<YearPickerChangeEventDetail>) {
+	async onSelectedYearChange(e: CustomEvent<YearPickerChangeEventDetail>) {
 		this.timestamp = e.detail.timestamp;
 
 		if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
 			this._currentPicker = "day";
+			await this._focusCurrentPicker();
 		} else if (this._pickersMode === CalendarPickersMode.MONTH_YEAR) {
 			this._currentPicker = "month";
+			await this._focusCurrentPicker();
 		} else {
 			this._fireEventAndUpdateSelectedDates(e.detail.dates);
 		}
-
-		this._currentPickerDOM._autoFocus = true;
 	}
 
-	onSelectedYearRangeChange(e: CustomEvent<YearRangePickerChangeEventDetail>) {
+	async onSelectedYearRangeChange(e: CustomEvent<YearRangePickerChangeEventDetail>) {
 		this.timestamp = e.detail.timestamp;
 		this._currentPicker = "year";
-		this._currentPickerDOM._autoFocus = true;
+		await this._focusCurrentPicker();
 	}
 
 	onNavigate(e: CustomEvent) {
 		this.timestamp = e.detail.timestamp;
+		this._focusCurrentPicker();
 	}
 
 	_onkeydown(e: KeyboardEvent) {

packages/main/src/CalendarTemplate.tsx

@@ -12,6 +12,7 @@ export default function CalendarTemplate(this: Calendar) {
 			<div
 				class="ui5-cal-root"
 				onKeyDown={this._onkeydown}
+				onFocusIn={this._onfocusin}
 			>
 				<div id={`${this._id}-content`} class="ui5-cal-content">
 					<DayPicker

packages/main/src/DayPicker.ts

@@ -8,6 +8,7 @@ import type LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js"
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	isSpace,
@@ -195,8 +196,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 	@query("[data-sap-focus-ref]")
 	_focusableDay!: HTMLElement;
 
-	_autoFocus?: boolean;
-
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
@@ -404,12 +403,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 		return dayNames.some(dayName => dayName.length > 4);
 	}
 
-	onAfterRendering() {
-		if (this._autoFocus && !this._hidden) {
-			this.focus();
-		}
-	}
-
 	_focusCorrectDay() {
 		if (this._shouldFocusDay) {
 			this._focusableDay.focus();
@@ -420,15 +413,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 		return document.activeElement !== this._focusableDay && this._specialCalendarDates.length === 0;
 	}
 
-	_onfocusin() {
-		this._autoFocus = true;
-		this._focusCorrectDay();
-	}
-
-	_onfocusout() {
-		this._autoFocus = false;
-	}
-
 	/**
 	 * Tells if the day is selected (dark blue).
 	 * @param timestamp
@@ -618,6 +602,21 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 		}
 	}
 
+	/**
+	 * Sets the focus reference to the day that was clicked with mousedown.
+	 * @param e
+	 * @private
+	 */
+	_onmousedown(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		const clickedItem = target.closest(".ui5-dp-item") as HTMLElement;
+
+		if (clickedItem && this._isDayPressed(clickedItem)) {
+			const timestamp = this._getTimestampFromDom(clickedItem);
+			this._setTimestamp(timestamp);
+		}
+	}
+
 	_onkeydown(e: KeyboardEvent) {
 		let preventDefault = true;
 
@@ -723,16 +722,20 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 	 * Called by the Calendar component.
 	 * @protected
 	 */
-	_showPreviousPage() {
+	async _showPreviousPage() {
 		this._modifyTimestampBy(-1, "month", false);
+		await renderFinished();
+		this._focusCorrectDay();
 	}
 
 	/**
 	 * Called by the Calendar component.
 	 * @protected
 	 */
-	_showNextPage() {
+	async _showNextPage() {
 		this._modifyTimestampBy(1, "month", false);
+		await renderFinished();
+		this._focusCorrectDay();
 	}
 
 	/**

packages/main/src/DayPickerTemplate.tsx

@@ -14,9 +14,8 @@ export default function DayPickerTemplate(this: DayPicker) {
 			onKeyDown={this._onkeydown}
 			onKeyUp={this._onkeyup}
 			onClick={this._onclick}
+			onMouseDown={this._onmousedown}
 			onMouseOver={this._onmouseover}
-			onFocusIn={this._onfocusin}
-			onFocusOut={this._onfocusout}
 		>
 			<div id={`${this._id}-content`} class="ui5-dp-content" role="grid" aria-roledescription={this.ariaRoledescription}>
 				<div role="row" class="ui5-dp-days-names-container">

packages/main/src/MonthPicker.ts

@@ -1,5 +1,6 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
@@ -35,6 +36,7 @@ import MonthPickerTemplate from "./MonthPickerTemplate.js";
 // Styles
 import monthPickerStyles from "./generated/themes/MonthPicker.css.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 
 const isBetween = (x: number, num1: number, num2: number) => x > Math.min(num1, num2) && x < Math.max(num1, num2);
 const PAGE_SIZE = 12; // total months on a single page
@@ -132,6 +134,9 @@ class MonthPicker extends CalendarPart implements ICalendarPicker {
 	@property({ type: Number })
 	_secondTimestamp?: number;
 
+	@query("[data-sap-focus-ref]")
+	_focusableMonth!: HTMLElement;
+
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
@@ -143,17 +148,26 @@ class MonthPicker extends CalendarPart implements ICalendarPicker {
 		this._buildMonths();
 	}
 
-	onAfterRendering() {
-		if (!this._hidden) {
-			this.focus();
-		}
-	}
-
 	get rowSize() {
 		return (this.secondaryCalendarType === CalendarType.Islamic && this.primaryCalendarType !== CalendarType.Islamic)
 			|| (this.secondaryCalendarType === CalendarType.Persian && this.primaryCalendarType !== CalendarType.Persian) ? 2 : 3;
 	}
 
+	_focusCorrectMonth() {
+		if (this._shouldFocusMonth) {
+			this._focusableMonth.focus();
+		}
+	}
+
+	get _shouldFocusMonth() {
+		return document.activeElement !== this._focusableMonth;
+	}
+
+	async _onfocusin() {
+		await renderFinished();
+		this._focusCorrectMonth();
+	}
+
 	_buildMonths() {
 		if (this._hidden) {
 			return;
@@ -330,6 +344,21 @@ class MonthPicker extends CalendarPart implements ICalendarPicker {
 		}
 	}
 
+	/**
+	 * Sets the focus reference to the month that was clicked with mousedown.
+	 * @param e
+	 * @private
+	 */
+	_onmousedown(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		const clickedItem = target.closest(".ui5-mp-item") as HTMLElement;
+
+		if (clickedItem) {
+			const timestamp = this._getTimestampFromDom(clickedItem);
+			this._setTimestamp(timestamp);
+		}
+	}
+
 	/**
 	 * Modifies timestamp by a given amount of months and,
 	 * if necessary, loads the prev/next page.

packages/main/src/MonthPickerTemplate.tsx

@@ -13,6 +13,8 @@ export default function MonthPickerTemplate(this: MonthPicker) {
 			onKeyDown={this._onkeydown}
 			onKeyUp={this._onkeyup}
 			onClick={this._selectMonth}
+			onMouseDown={this._onmousedown}
+			onFocusIn={this._onfocusin}
 		>
 			{this._monthsInterval.map(months =>
 				<div role="row" class="ui5-mp-quarter">

packages/main/src/YearPicker.ts

@@ -240,12 +240,6 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
 		this._yearsInterval = intervals;
 	}
 
-	onAfterRendering() {
-		if (!this._hidden) {
-			this.focus();
-		}
-	}
-
 	/**
 	  * Returns true if year timestamp is inside the selection range.
 	  * @private

packages/main/src/YearRangePicker.ts

@@ -313,12 +313,6 @@ class YearRangePicker extends CalendarPart implements ICalendarPicker {
 		return isBetweenInclusive(timestamp, this.selectedDates[0], this.selectedDates[1]);
 	}
 
-	onAfterRendering() {
-		if (!this._hidden) {
-			this.focus();
-		}
-	}
-
 	_onkeydown(e: KeyboardEvent) {
 		let preventDefault = true;
 		const pageSize = this._getPageSize();