fix(material/datepicker): do not re-assign the same forms value (#32447)

The datepicker ControlValueAccessor produces a new date object for each keystroke as the user is typing. When used with the interop behavior from signal forms, this can end up reverting the user's value as they're typing.

These changes ignore `writeValue` calls if they pass the exact same date object.

Fixes #32442.

Author: crisbeto

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

@@ -289,22 +289,27 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
     return this._validator ? this._validator(c) : null;
   }
 
-  // Implemented as part of ControlValueAccessor.
+  /** Implemented as part of ControlValueAccessor. */
   writeValue(value: D): void {
-    this._assignValueProgrammatically(value);
+    // 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);
+    }
   }
 
-  // Implemented as part of ControlValueAccessor.
+  /** Implemented as part of ControlValueAccessor. */
   registerOnChange(fn: (value: any) => void): void {
     this._cvaOnChange = fn;
   }
 
-  // Implemented as part of ControlValueAccessor.
+  /** Implemented as part of ControlValueAccessor. */
   registerOnTouched(fn: () => void): void {
     this._onTouched = fn;
   }
 
-  // Implemented as part of ControlValueAccessor.
+  /** Implemented as part of ControlValueAccessor. */
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
   }

src/material/datepicker/datepicker.spec.ts

@@ -1160,6 +1160,22 @@ describe('MatDatepicker', () => {
 
         expect(formControl.hasError('matDatepickerParse')).toBe(true);
       });
+
+      it('should not re-format the input value if the forms module re-assigns the same date', () => {
+        const input = fixture.nativeElement.querySelector('input');
+        const date = new Date(2017, JAN, 1);
+        testComponent.formControl.setValue(date);
+        fixture.detectChanges();
+        expect(input.value).toContain('2017');
+
+        // Note: this isn't how users would behave, but it captures
+        // the sequence of events with signal forms.
+        input.value = 'foo';
+        testComponent.formControl.setValue(date);
+        fixture.detectChanges();
+
+        expect(input.value).toBe('foo');
+      });
     });
 
     describe('datepicker with mat-datepicker-toggle', () => {