fix(material/datepicker): resolve change after checked errors

Fixes several "changed after checked" errors in the datepicker that were largely due to components depending on state from other components.

Author: crisbeto

src/material/datepicker/calendar.spec.ts

@@ -5,7 +5,7 @@ import {
   dispatchMouseEvent,
   provideFakeDirectionality,
 } from '@angular/cdk/testing/private';
-import {Component, provideCheckNoChangesConfig} from '@angular/core';
+import {Component} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {DateAdapter, MatNativeDateModule} from '../core';
@@ -21,11 +21,7 @@ describe('MatCalendar', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatNativeDateModule, MatDatepickerModule],
-      providers: [
-        MatDatepickerIntl,
-        provideFakeDirectionality('ltr'),
-        provideCheckNoChangesConfig({exhaustive: false}),
-      ],
+      providers: [MatDatepickerIntl, provideFakeDirectionality('ltr')],
       declarations: [
         // Test components.
         StandardCalendar,

src/material/datepicker/calendar.ts

@@ -64,68 +64,47 @@ export class MatCalendarHeader<D> {
   calendar = inject<MatCalendar<D>>(MatCalendar);
   private _dateAdapter = inject<DateAdapter<D>>(DateAdapter, {optional: true})!;
   private _dateFormats = inject<MatDateFormats>(MAT_DATE_FORMATS, {optional: true})!;
+  private _periodButtonText: string;
+  private _periodButtonDescription: string;
+  private _periodButtonLabel: string;
+  private _prevButtonLabel: string;
+  private _nextButtonLabel: string;
 
   constructor(...args: unknown[]);
 
   constructor() {
     inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     const changeDetectorRef = inject(ChangeDetectorRef);
-    this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());
+    this._updateLabels();
+    this.calendar.stateChanges.subscribe(() => {
+      this._updateLabels();
+      changeDetectorRef.markForCheck();
+    });
   }
 
   /** The display text for the current calendar view. */
   get periodButtonText(): string {
-    if (this.calendar.currentView == 'month') {
-      return this._dateAdapter
-        .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
-        .toLocaleUpperCase();
-    }
-    if (this.calendar.currentView == 'year') {
-      return this._dateAdapter.getYearName(this.calendar.activeDate);
-    }
-
-    return this._intl.formatYearRange(...this._formatMinAndMaxYearLabels());
+    return this._periodButtonText;
   }
 
   /** The aria description for the current calendar view. */
   get periodButtonDescription(): string {
-    if (this.calendar.currentView == 'month') {
-      return this._dateAdapter
-        .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
-        .toLocaleUpperCase();
-    }
-    if (this.calendar.currentView == 'year') {
-      return this._dateAdapter.getYearName(this.calendar.activeDate);
-    }
-
-    // Format a label for the window of years displayed in the multi-year calendar view. Use
-    // `formatYearRangeLabel` because it is TTS friendly.
-    return this._intl.formatYearRangeLabel(...this._formatMinAndMaxYearLabels());
+    return this._periodButtonDescription;
   }
 
   /** The `aria-label` for changing the calendar view. */
   get periodButtonLabel(): string {
-    return this.calendar.currentView == 'month'
-      ? this._intl.switchToMultiYearViewLabel
-      : this._intl.switchToMonthViewLabel;
+    return this._periodButtonLabel;
   }
 
   /** The label for the previous button. */
   get prevButtonLabel(): string {
-    return {
-      'month': this._intl.prevMonthLabel,
-      'year': this._intl.prevYearLabel,
-      'multi-year': this._intl.prevMultiYearLabel,
-    }[this.calendar.currentView];
+    return this._prevButtonLabel;
   }
 
   /** The label for the next button. */
   get nextButtonLabel(): string {
-    return {
-      'month': this._intl.nextMonthLabel,
-      'year': this._intl.nextYearLabel,
-      'multi-year': this._intl.nextMultiYearLabel,
-    }[this.calendar.currentView];
+    return this._nextButtonLabel;
   }
 
   /** Handles user clicks on the period label. */
@@ -172,6 +151,41 @@ export class MatCalendarHeader<D> {
     );
   }
 
+  /** Updates the labels for the various sections of the header. */
+  private _updateLabels() {
+    const calendar = this.calendar;
+    const intl = this._intl;
+    const adapter = this._dateAdapter;
+
+    if (calendar.currentView === 'month') {
+      this._periodButtonText = adapter
+        .format(calendar.activeDate, this._dateFormats.display.monthYearLabel)
+        .toLocaleUpperCase();
+      this._periodButtonDescription = adapter
+        .format(calendar.activeDate, this._dateFormats.display.monthYearLabel)
+        .toLocaleUpperCase();
+      this._periodButtonLabel = intl.switchToMultiYearViewLabel;
+      this._prevButtonLabel = intl.prevMonthLabel;
+      this._nextButtonLabel = intl.nextMonthLabel;
+    } else if (calendar.currentView === 'year') {
+      this._periodButtonText = adapter.getYearName(calendar.activeDate);
+      this._periodButtonDescription = adapter.getYearName(calendar.activeDate);
+      this._periodButtonLabel = intl.switchToMonthViewLabel;
+      this._prevButtonLabel = intl.prevYearLabel;
+      this._nextButtonLabel = intl.nextYearLabel;
+    } else {
+      this._periodButtonText = intl.formatYearRange(...this._formatMinAndMaxYearLabels());
+      // Format a label for the window of years displayed in the multi-year calendar view. Use
+      // `formatYearRangeLabel` because it is TTS friendly.
+      this._periodButtonDescription = intl.formatYearRangeLabel(
+        ...this._formatMinAndMaxYearLabels(),
+      );
+      this._periodButtonLabel = intl.switchToMonthViewLabel;
+      this._prevButtonLabel = intl.prevMultiYearLabel;
+      this._nextButtonLabel = intl.nextMultiYearLabel;
+    }
+  }
+
   /** Whether the two dates represent the same view in the current view mode (month or year). */
   private _isSameView(date1: D, date2: D): boolean {
     if (this.calendar.currentView == 'month') {
@@ -387,6 +401,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
     this._moveFocusOnNextTick = true;
     this._changeDetectorRef.markForCheck();
     if (viewChangedResult) {
+      this.stateChanges.next();
       this.viewChanged.emit(viewChangedResult);
     }
   }

src/material/datepicker/date-range-input-parts.ts

@@ -17,6 +17,7 @@ import {
   Input,
   OnInit,
   inject,
+  signal,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -47,6 +48,7 @@ abstract class MatDateRangeInputPartBase<D>
   override _elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
   _defaultErrorStateMatcher = inject(ErrorStateMatcher);
   private _injector = inject(Injector);
+  private _rawValue = signal('');
   _parentForm = inject(NgForm, {optional: true});
   _parentFormGroup = inject(FormGroupDirective, {optional: true});
 
@@ -120,11 +122,13 @@ abstract class MatDateRangeInputPartBase<D>
       // that whatever logic is in here has to be super lean or we risk destroying the performance.
       this.updateErrorState();
     }
+
+    this._rawValue.set(this._elementRef.nativeElement.value);
   }
 
   /** Gets whether the input is empty. */
   isEmpty(): boolean {
-    return this._elementRef.nativeElement.value.length === 0;
+    return this._rawValue().length === 0;
   }
 
   /** Gets the placeholder of the input. */
@@ -139,9 +143,8 @@ abstract class MatDateRangeInputPartBase<D>
 
   /** Gets the value that should be used when mirroring the input's size. */
   getMirrorValue(): string {
-    const element = this._elementRef.nativeElement;
-    const value = element.value;
-    return value.length > 0 ? value : element.placeholder;
+    const value = this._rawValue();
+    return value.length > 0 ? value : this._getPlaceholder();
   }
 
   /** Refreshes the error state of the input. */
@@ -191,6 +194,7 @@ abstract class MatDateRangeInputPartBase<D>
         : this._rangeInput._startInput
     ) as MatDateRangeInputPartBase<D> | undefined;
     opposite?._validatorOnChange();
+    this._rawValue.set(this._elementRef.nativeElement.value);
   }
 
   protected override _formatValue(value: D | null) {

src/material/datepicker/date-range-input.spec.ts

@@ -6,15 +6,7 @@ import {
   dispatchKeyboardEvent,
   provideFakeDirectionality,
 } from '@angular/cdk/testing/private';
-import {
-  Component,
-  Directive,
-  ElementRef,
-  provideCheckNoChangesConfig,
-  Provider,
-  Type,
-  ViewChild,
-} from '@angular/core';
+import {Component, Directive, ElementRef, Provider, Type, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
 import {
   FormControl,
@@ -48,7 +40,6 @@ describe('MatDateRangeInput', () => {
         component,
       ],
       providers: [
-        provideCheckNoChangesConfig({exhaustive: false}),
         ...providers,
         {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
       ],