fix(material/datepicker): avoid losing focus when re-rendering the cu…

…rrent view (#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 #29265.

(cherry picked from commit e74065a)

src/material/datepicker/calendar.ts

@@ -454,12 +454,16 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
         ? changes['maxDate']
         : undefined;
 
-    const change = minDateChange || maxDateChange || changes['dateFilter'];
+    const changeRequiringRerender = minDateChange || maxDateChange || changes['dateFilter'];
 
-    if (change && !change.firstChange) {
+    if (changeRequiringRerender && !changeRequiringRerender.firstChange) {
       const view = this._getCurrentViewComponent();
 
       if (view) {
+        // Schedule focus to be moved to the active date since re-rendering
+        // can blur the active cell. See #29265.
+        this._moveFocusOnNextTick = true;
+
         // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
         // passed down to the view via data bindings which won't be up-to-date when we call `_init`.
         this._changeDetectorRef.detectChanges();

src/material/datepicker/datepicker.spec.ts

@@ -1726,13 +1726,15 @@ describe('MatDatepicker', () => {
         testComponent.minDate = new Date(2020, JAN, 1);
         fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
+        flush();
 
         expect(getDisabledCells()).not.toBe(disabledCellCount);
         disabledCellCount = getDisabledCells();
 
         testComponent.maxDate = new Date(2020, JAN, 10);
         fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
+        flush();
 
         expect(getDisabledCells()).not.toBe(disabledCellCount);
       }));