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

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

Fixes #32475.

(cherry picked from commit 29a8a2f)

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