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.

(cherry picked from commit 9c018d1)

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}},
       ],