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/date-range-input-parts.ts

@@ -186,8 +186,8 @@ abstract class MatDateRangeInputPartBase<D>
     return source !== this._rangeInput._startInput && source !== this._rangeInput._endInput;
   }
 
-  protected override _assignValueProgrammatically(value: D | null) {
-    super._assignValueProgrammatically(value);
+  protected override _assignValueProgrammatically(value: D | null, reformat: boolean) {
+    super._assignValueProgrammatically(value, reformat);
     const opposite = (
       this === (this._rangeInput._startInput as MatDateRangeInputPartBase<D>)
         ? this._rangeInput._endInput

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

@@ -94,7 +94,7 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
     return this._model ? this._getValueFromModel(this._model.selection) : this._pendingValue;
   }
   set value(value: any) {
-    this._assignValueProgrammatically(value);
+    this._assignValueProgrammatically(value, true);
   }
   protected _model: MatDateSelectionModel<S, D> | undefined;
 
@@ -259,7 +259,7 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
 
     // Update the displayed date when the locale changes.
     this._localeSubscription = this._dateAdapter.localeChanges.subscribe(() => {
-      this._assignValueProgrammatically(this.value);
+      this._assignValueProgrammatically(this.value, true);
     });
   }
 
@@ -293,10 +293,8 @@ 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) {
-      this._assignValueProgrammatically(value);
-    }
+    // Skip such cases since they can prevent the user from typing (see #32442 and #32475).
+    this._assignValueProgrammatically(value, value !== this.value);
   }
 
   /** Implemented as part of ControlValueAccessor. */
@@ -403,12 +401,15 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
   }
 
   /** Programmatically assigns a value to the input. */
-  protected _assignValueProgrammatically(value: D | null) {
+  protected _assignValueProgrammatically(value: D | null, reformat: boolean) {
     value = this._dateAdapter.deserialize(value);
     this._lastValueValid = this._isValidValue(value);
     value = this._dateAdapter.getValidDateOrNull(value);
     this._assignValue(value);
-    this._formatValue(value);
+
+    if (reformat) {
+      this._formatValue(value);
+    }
   }
 
   /** Gets whether a value matches the current date filter. */

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', () => {