fix(datepicker): changed after checked error when moving preview between months (#19174)

Fixes a "changed after checked" error being thrown if the user has an active preview and they move to a different month using the keyboard. This is something that we had a fix for, but after #19088 it has to be moved one component up, because the binding that changes is in a different view.

Author: crisbeto

src/material/datepicker/calendar-body.ts

@@ -18,7 +18,6 @@ import {
   OnChanges,
   SimpleChanges,
   OnDestroy,
-  ChangeDetectorRef,
 } from '@angular/core';
 import {take} from 'rxjs/operators';
 
@@ -132,11 +131,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
   /** Width of an individual cell. */
   _cellWidth: string;
 
-  constructor(
-    private _elementRef: ElementRef<HTMLElement>,
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _ngZone: NgZone) {
-
+  constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) {
     _ngZone.runOutsideAngular(() => {
       const element = _elementRef.nativeElement;
       element.addEventListener('mouseenter', this._enterHandler, true);
@@ -321,15 +316,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
       // we have a gap between the cells and the rows and we don't want to remove the
       // range just for it to show up again when the user moves a few pixels to the side.
       if (event.target && isTableCell(event.target as HTMLElement)) {
-        this._ngZone.run(() => {
-          this.previewChange.emit({value: null, event});
-
-          // Note that here we need to use `detectChanges`, rather than `markForCheck`, because
-          // the way `_focusActiveCell` is set up at the moment makes it fire at the wrong time
-          // when navigating one month back using the keyboard which will cause this handler
-          // to throw a "changed after checked" error when updating the preview state.
-          this._changeDetectorRef.detectChanges();
-        });
+        this._ngZone.run(() => this.previewChange.emit({value: null, event}));
       }
     }
   }

src/material/datepicker/month-view.ts

@@ -332,6 +332,12 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
           this._rangeStrategy.createPreview(value, this.selected as DateRange<D>, event);
       this._previewStart = this._getCellCompareValue(previewRange.start);
       this._previewEnd = this._getCellCompareValue(previewRange.end);
+
+      // Note that here we need to use `detectChanges`, rather than `markForCheck`, because
+      // the way `_focusActiveCell` is set up at the moment makes it fire at the wrong time
+      // when navigating one month back using the keyboard which will cause this handler
+      // to throw a "changed after checked" error when updating the preview state.
+      this._changeDetectorRef.detectChanges();
     }
   }
 

tools/public_api_guard/material/datepicker.d.ts

@@ -115,7 +115,7 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
     readonly selectedValueChange: EventEmitter<MatCalendarUserEvent<number>>;
     startValue: number;
     todayValue: number;
-    constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone);
+    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone);
     _cellClicked(cell: MatCalendarCell, event: MouseEvent): void;
     _focusActiveCell(movePreview?: boolean): void;
     _isActiveCell(rowIndex: number, colIndex: number): boolean;