Skip to content

Commit f6e7fcd

Browse files
hinzzxhinzzx
committed
fix: fix tests, remove async approach
1 parent 0c48089 commit f6e7fcd

File tree

5 files changed

+81
-48
lines changed

5 files changed

+81
-48
lines changed

‎packages/main/src/Calendar.ts

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,15 @@ import { CALENDAR_HEADER_NEXT_BUTTON, CALENDAR_HEADER_PREVIOUS_BUTTON } from "./
5050
import type { YearRangePickerChangeEventDetail } from "./YearRangePicker.js";
5151

5252
interface ICalendarPicker extends HTMLElement {
53-
_showPreviousPage: () => void | Promise<void>,
54-
_showNextPage: () => void | Promise<void>,
53+
_showPreviousPage: () => void,
54+
_showNextPage: () => void,
5555
_hasPreviousPage: () => boolean,
5656
_hasNextPage: () => boolean,
5757
_currentYearRange?: CalendarYearRangeT,
58+
_focusableDay?: HTMLElement,
59+
_focusableMonth?: HTMLElement,
60+
_focusableYear?: HTMLElement,
61+
_focusableYearRange?: HTMLElement,
5862
}
5963

6064
/**
@@ -334,9 +338,21 @@ class Calendar extends CalendarPart {
334338
this._valueIsProcessed = false;
335339
}
336340

337-
async _focusCurrentPicker() {
338-
await renderFinished();
339-
this._currentPickerDOM.focus();
341+
_focusCurrentPicker() {
342+
// focus after the current picker's DOM is updated
343+
requestAnimationFrame(() => {
344+
const focusableElement = this._currentPickerDOM._focusableDay
345+
|| this._currentPickerDOM._focusableMonth
346+
|| this._currentPickerDOM._focusableYear
347+
|| this._currentPickerDOM._focusableYearRange;
348+
349+
if (focusableElement) {
350+
focusableElement.focus();
351+
} else {
352+
// focus the picker container if no focusable element is found
353+
this._currentPickerDOM.focus();
354+
}
355+
});
340356
}
341357

342358
/**
@@ -527,40 +543,40 @@ class Calendar extends CalendarPart {
527543
/**
528544
* The user clicked the "month" button in the header
529545
*/
530-
async onHeaderShowMonthPress() {
531-
await this.showMonth();
546+
onHeaderShowMonthPress() {
547+
this.showMonth();
532548
this.fireDecoratorEvent("show-month-view");
533549
}
534550

535-
async showMonth() {
551+
showMonth() {
536552
this._currentPicker = "month";
537-
await this._focusCurrentPicker();
553+
this._focusCurrentPicker();
538554
}
539555

540556
/**
541557
* The user clicked the "year" button in the header
542558
*/
543-
async onHeaderShowYearPress() {
544-
await this.showYear();
559+
onHeaderShowYearPress() {
560+
this.showYear();
545561
this.fireDecoratorEvent("show-year-view");
546562
}
547563

548-
async showYear() {
564+
showYear() {
549565
this._currentPicker = "year";
550-
await this._focusCurrentPicker();
566+
this._focusCurrentPicker();
551567
}
552568

553569
/**
554570
* The user clicked the "year range" button in the YearPicker header
555571
*/
556-
async onHeaderShowYearRangePress() {
557-
await this.showYearRange();
572+
onHeaderShowYearRangePress() {
573+
this.showYearRange();
558574
this.fireDecoratorEvent("show-year-range-view");
559575
}
560576

561-
async showYearRange() {
577+
showYearRange() {
562578
this._currentPicker = "yearrange";
563-
await this._focusCurrentPicker();
579+
this._focusCurrentPicker();
564580
}
565581

566582
get _currentPickerDOM() {
@@ -705,35 +721,35 @@ class Calendar extends CalendarPart {
705721
this._fireEventAndUpdateSelectedDates(e.detail.dates);
706722
}
707723

708-
async onSelectedMonthChange(e: CustomEvent<MonthPickerChangeEventDetail>) {
724+
onSelectedMonthChange(e: CustomEvent<MonthPickerChangeEventDetail>) {
709725
this.timestamp = e.detail.timestamp;
710726

711727
if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
712728
this._currentPicker = "day";
713-
await this._focusCurrentPicker();
729+
this._focusCurrentPicker();
714730
} else {
715731
this._fireEventAndUpdateSelectedDates(e.detail.dates);
716732
}
717733
}
718734

719-
async onSelectedYearChange(e: CustomEvent<YearPickerChangeEventDetail>) {
735+
onSelectedYearChange(e: CustomEvent<YearPickerChangeEventDetail>) {
720736
this.timestamp = e.detail.timestamp;
721737

722738
if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
723739
this._currentPicker = "day";
724-
await this._focusCurrentPicker();
740+
this._focusCurrentPicker();
725741
} else if (this._pickersMode === CalendarPickersMode.MONTH_YEAR) {
726742
this._currentPicker = "month";
727-
await this._focusCurrentPicker();
743+
this._focusCurrentPicker();
728744
} else {
729745
this._fireEventAndUpdateSelectedDates(e.detail.dates);
730746
}
731747
}
732748

733-
async onSelectedYearRangeChange(e: CustomEvent<YearRangePickerChangeEventDetail>) {
749+
onSelectedYearRangeChange(e: CustomEvent<YearRangePickerChangeEventDetail>) {
734750
this.timestamp = e.detail.timestamp;
735751
this._currentPicker = "year";
736-
await this._focusCurrentPicker();
752+
this._focusCurrentPicker();
737753
}
738754

739755
onNavigate(e: CustomEvent) {

‎packages/main/src/DayPicker.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import type LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js"
88
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
99
import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
1010
import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
11-
import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
1211
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
1312
import {
1413
isSpace,
@@ -403,10 +402,14 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
403402
return dayNames.some(dayName => dayName.length > 4);
404403
}
405404

406-
async _focusCorrectDay() {
407-
await renderFinished();
405+
_focusCorrectDay() {
408406
if (this._shouldFocusDay) {
409-
this._focusableDay.focus();
407+
// focus after DOM updates
408+
requestAnimationFrame(() => {
409+
if (this._focusableDay) {
410+
this._focusableDay.focus();
411+
}
412+
});
410413
}
411414
}
412415

‎packages/main/src/MonthPicker.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ import MonthPickerTemplate from "./MonthPickerTemplate.js";
3636
// Styles
3737
import monthPickerStyles from "./generated/themes/MonthPicker.css.js";
3838
import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
39-
import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
4039

4140
const isBetween = (x: number, num1: number, num2: number) => x > Math.min(num1, num2) && x < Math.max(num1, num2);
4241
const PAGE_SIZE = 12; // total months on a single page
@@ -155,16 +154,20 @@ class MonthPicker extends CalendarPart implements ICalendarPicker {
155154

156155
_focusCorrectMonth() {
157156
if (this._shouldFocusMonth) {
158-
this._focusableMonth.focus();
157+
// focus after DOM updates
158+
requestAnimationFrame(() => {
159+
if (this._focusableMonth) {
160+
this._focusableMonth.focus();
161+
}
162+
});
159163
}
160164
}
161165

162166
get _shouldFocusMonth() {
163167
return document.activeElement !== this._focusableMonth;
164168
}
165169

166-
async _onfocusin() {
167-
await renderFinished();
170+
_onfocusin() {
168171
this._focusCorrectMonth();
169172
}
170173

@@ -366,15 +369,14 @@ class MonthPicker extends CalendarPart implements ICalendarPicker {
366369
* @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
367370
* @private
368371
*/
369-
async _modifyTimestampBy(amount: number, preserveDate?: boolean) {
372+
_modifyTimestampBy(amount: number, preserveDate?: boolean) {
370373
// Modify the current timestamp
371374
this._safelyModifyTimestampBy(amount, "month", preserveDate);
372375
this._updateSecondTimestamp();
373376

374377
// Notify the calendar to update its timestamp
375378
this.fireDecoratorEvent("navigate", { timestamp: this.timestamp! });
376379

377-
await renderFinished();
378380
this._focusCorrectMonth();
379381
}
380382

‎packages/main/src/YearPicker.ts

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
33
import query from "@ui5/webcomponents-base/dist/decorators/query.js";
44
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
55
import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
6-
import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
76
import type LocaleT from "sap/ui/core/Locale";
87
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
98
import {
@@ -145,9 +144,13 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
145144
return YearPicker.i18nBundle.getText(YEAR_PICKER_DESCRIPTION);
146145
}
147146

148-
async _onfocusin() {
149-
await renderFinished();
150-
this._focusableYear.focus();
147+
_onfocusin() {
148+
// focus after DOM updates
149+
requestAnimationFrame(() => {
150+
if (this._focusableYear) {
151+
this._focusableYear.focus();
152+
}
153+
});
151154
}
152155

153156
onBeforeRendering() {
@@ -352,16 +355,19 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
352355
* @param amount
353356
* @private
354357
*/
355-
async _modifyTimestampBy(amount: number) {
358+
_modifyTimestampBy(amount: number) {
356359
// Modify the current timestamp
357360
this._safelyModifyTimestampBy(amount, "year");
358361
this._updateSecondTimestamp();
359362

360363
// Notify the calendar to update its timestamp
361364
this.fireDecoratorEvent("navigate", { timestamp: this.timestamp! });
362365

363-
await renderFinished();
364-
this._focusableYear.focus();
366+
requestAnimationFrame(() => {
367+
if (this._focusableYear) {
368+
this._focusableYear.focus();
369+
}
370+
});
365371
}
366372

367373
_onkeyup(e: KeyboardEvent) {

‎packages/main/src/YearRangePicker.ts

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
33
import query from "@ui5/webcomponents-base/dist/decorators/query.js";
44
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
55
import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
6-
import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
76
import type LocaleT from "sap/ui/core/Locale";
87
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
98
import {
@@ -140,9 +139,13 @@ class YearRangePicker extends CalendarPart implements ICalendarPicker {
140139
return YearRangePicker.i18nBundle.getText(YEAR_RANGE_PICKER_DESCRIPTION);
141140
}
142141

143-
async _onfocusin() {
144-
await renderFinished();
145-
this._focusableYearRange.focus();
142+
_onfocusin() {
143+
// focus after DOM updates
144+
requestAnimationFrame(() => {
145+
if (this._focusableYearRange) {
146+
this._focusableYearRange.focus();
147+
}
148+
});
146149
}
147150

148151
onBeforeRendering() {
@@ -498,16 +501,19 @@ class YearRangePicker extends CalendarPart implements ICalendarPicker {
498501
* @param amount
499502
* @private
500503
*/
501-
async _modifyTimestampBy(amount: number) {
504+
_modifyTimestampBy(amount: number) {
502505
// Modify the current timestamp
503506
const amountInYears = amount * this._getRangeSize();
504507
this._safelyModifyTimestampBy(amountInYears, "year");
505508

506509
// Notify the calendar to update its timestamp
507510
this.fireDecoratorEvent("navigate", { timestamp: this.timestamp! });
508511

509-
await renderFinished();
510-
this._focusableYearRange.focus();
512+
requestAnimationFrame(() => {
513+
if (this._focusableYearRange) {
514+
this._focusableYearRange.focus();
515+
}
516+
});
511517
}
512518

513519
_modifyGridStartBy(years: number) {

0 commit comments

Comments
 (0)