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 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) ? 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 | undefined; @@ -259,7 +259,7 @@ export abstract class MatDatepickerInputBase { - this._assignValueProgrammatically(this.value); + this._assignValueProgrammatically(this.value, true); }); } @@ -293,10 +293,8 @@ export abstract class MatDatepickerInputBase { 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', () => {