From 7dd08dbd362c7a73c9f061bb6c28fe75d54aa2aa Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 6 Dec 2025 11:00:38 +0100
Subject: [PATCH] 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.
---
 .../datepicker/date-range-input-parts.ts        |  4 ++--
 .../datepicker/datepicker-input-base.ts         | 17 +++++++++--------
 src/material/datepicker/datepicker.spec.ts      | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/material/datepicker/date-range-input-parts.ts b/src/material/datepicker/date-range-input-parts.ts
index d65457b5b093..8bef638e2343 100644
--- a/src/material/datepicker/date-range-input-parts.ts
+++ b/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
diff --git a/src/material/datepicker/datepicker-input-base.ts b/src/material/datepicker/datepicker-input-base.ts
index 35db5b67f3d1..52cff1b59ddc 100644
--- a/src/material/datepicker/datepicker-input-base.ts
+++ b/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. */
diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
index d84dbba537b0..bc02626d7639 100644
--- a/src/material/datepicker/datepicker.spec.ts
+++ b/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', () => {