fix(material/datepicker): value reset when invalid value is entered using signal forms

Fixes that the datepicker input value was being reset when the user types in an invalid date while using signal forms.

Fixes #32475.

Author: crisbeto

src/material/datepicker/datepicker-input-base.ts

@@ -84,6 +84,7 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
   protected _elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
   _dateAdapter = inject<DateAdapter<D>>(DateAdapter, {optional: true})!;
   private _dateFormats = inject<MatDateFormats>(MAT_DATE_FORMATS, {optional: true})!;
+  private _hasSetInitialCvaValue: boolean;
 
   /** Whether the component has been initialized. */
   private _isInitialized: boolean;
@@ -293,8 +294,9 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
   writeValue(value: D): void {
     // We produce a different date object on each keystroke which can cause signal forms'
     // interop logic to keep calling `writeValue` with the same value as the user is typing.
-    // Skip such cases since they can prevent the user from typing (see #32442).
-    if (!value || value !== this.value) {
+    // Skip such cases since they can prevent the user from typing (see #32442 and #32475).
+    if (!this._hasSetInitialCvaValue || value !== this.value) {
+      this._hasSetInitialCvaValue = true;
       this._assignValueProgrammatically(value);
     }
   }

src/material/datepicker/datepicker.spec.ts

@@ -1176,6 +1176,21 @@ describe('MatDatepicker', () => {
 
         expect(input.value).toBe('foo');
       });
+
+      it('should not re-format the input value if the forms module re-assigns null', () => {
+        const input = fixture.nativeElement.querySelector('input');
+        testComponent.formControl.setValue(null);
+        fixture.detectChanges();
+        expect(input.value).toBe('');
+
+        // Note: this isn't how users would behave, but it captures
+        // the sequence of events with signal forms.
+        input.value = 'foo';
+        testComponent.formControl.setValue(null);
+        fixture.detectChanges();
+
+        expect(input.value).toBe('foo');
+      });
     });
 
     describe('datepicker with mat-datepicker-toggle', () => {