Skip to content

Commit

Permalink
fix(material/datepicker): fix Voiceover losing focus on PageDown
Browse files Browse the repository at this point in the history
Fixes an issue where Voiceover loses focus when pressing PageDown/PageUp
in the calendar to go to the next month/year (issue angular#24330). Adding a
20ms timeout seems to fix this.

Note that this will not fully fix the issue until angular#24397 is merged.

Address angular#24330.
  • Loading branch information
zarend committed Feb 11, 2022
1 parent 33b6773 commit 3f294ef
Showing 1 changed file with 20 additions and 14 deletions.
34 changes: 20 additions & 14 deletions src/material/datepicker/calendar-body.ts
Original file line number Diff line number Diff line change
Expand Up @@ -195,23 +195,29 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
return cellNumber == this.activeCell;
}

/** Focuses the active cell after the microtask queue is empty. */
/**
* Focuses the active cell after the microtask queue is empty.
*
* Adds a 20ms timeout to fix Voiceover losing focus when pressing PageUp/PageDown (issue #24330).
*/
_focusActiveCell(movePreview = true) {
this._ngZone.runOutsideAngular(() => {
this._ngZone.onStable.pipe(take(1)).subscribe(() => {
const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(
'.mat-calendar-body-active',
);

if (activeCell) {
if (!movePreview) {
this._skipNextFocus = true;
setTimeout(() => {
this._ngZone.runOutsideAngular(() => {
this._ngZone.onStable.pipe(take(1)).subscribe(() => {
const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(
'.mat-calendar-body-active',
);

if (activeCell) {
if (!movePreview) {
this._skipNextFocus = true;
}

activeCell.focus();
}

activeCell.focus();
}
});
});
});
}, 20);
}

/** Gets whether a value is the start of the main range. */
Expand Down

0 comments on commit 3f294ef

Please sign in to comment.