Skip to content

Commit e74065a

Browse files
authored
fix(material/datepicker): avoid losing focus when re-rendering the current view (angular#29287)
When some calendar inputs change, we need to re-render the entire view (e.g. `minDate` or `dateFilter`). This can cause the active cell to lose focus since it's being re-rendered. These changes schedule the active cell to be re-focused in the cases where the view would be re-rendered. Fixes angular#29265.
1 parent aa17c2d commit e74065a

File tree

2 files changed

+8
-2
lines changed

2 files changed

+8
-2
lines changed

src/material/datepicker/calendar.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -454,12 +454,16 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
454454
? changes['maxDate']
455455
: undefined;
456456

457-
const change = minDateChange || maxDateChange || changes['dateFilter'];
457+
const changeRequiringRerender = minDateChange || maxDateChange || changes['dateFilter'];
458458

459-
if (change && !change.firstChange) {
459+
if (changeRequiringRerender && !changeRequiringRerender.firstChange) {
460460
const view = this._getCurrentViewComponent();
461461

462462
if (view) {
463+
// Schedule focus to be moved to the active date since re-rendering
464+
// can blur the active cell. See #29265.
465+
this._moveFocusOnNextTick = true;
466+
463467
// We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
464468
// passed down to the view via data bindings which won't be up-to-date when we call `_init`.
465469
this._changeDetectorRef.detectChanges();

src/material/datepicker/datepicker.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1726,13 +1726,15 @@ describe('MatDatepicker', () => {
17261726
testComponent.minDate = new Date(2020, JAN, 1);
17271727
fixture.changeDetectorRef.markForCheck();
17281728
fixture.detectChanges();
1729+
flush();
17291730

17301731
expect(getDisabledCells()).not.toBe(disabledCellCount);
17311732
disabledCellCount = getDisabledCells();
17321733

17331734
testComponent.maxDate = new Date(2020, JAN, 10);
17341735
fixture.changeDetectorRef.markForCheck();
17351736
fixture.detectChanges();
1737+
flush();
17361738

17371739
expect(getDisabledCells()).not.toBe(disabledCellCount);
17381740
}));

0 commit comments

Comments
 (0)