fix(material/datepicker): Only update selection when value changed (#21846)

Author: mcalmus

src/material/datepicker/date-range-input-parts.ts

@@ -261,6 +261,16 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements
     return modelValue.start;
   }
 
+  protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean {
+    if (!super._shouldHandleChangeEvent(change)) {
+      return false;
+    } else {
+      return !change.oldValue?.start ? !!change.selection.start :
+        !change.selection.start ||
+        !!this._dateAdapter.compareDate(change.oldValue.start, change.selection.start);
+    }
+  }
+
   protected _assignValueToModel(value: D | null) {
     if (this._model) {
       const range = new DateRange(value, this._model.selection.end);
@@ -365,6 +375,16 @@ export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
     return modelValue.end;
   }
 
+  protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean {
+    if (!super._shouldHandleChangeEvent(change)) {
+      return false;
+    } else {
+      return !change.oldValue?.end ? !!change.selection.end :
+        !change.selection.end ||
+        !!this._dateAdapter.compareDate(change.oldValue.end, change.selection.end);
+    }
+  }
+
   protected _assignValueToModel(value: D | null) {
     if (this._model) {
       const range = new DateRange(this._model.selection.start, value);

src/material/datepicker/date-range-input.spec.ts

@@ -865,6 +865,45 @@ describe('MatDateRangeInput', () => {
     expect(endInput.errorStateMatcher).toBe(matcher);
   });
 
+
+  it('should only update model for input that changed', fakeAsync(() => {
+    const fixture = createComponent(RangePickerNgModel);
+
+    fixture.detectChanges();
+    tick();
+
+    expect(fixture.componentInstance.startDateModelChangeCount).toBe(0);
+    expect(fixture.componentInstance.endDateModelChangeCount).toBe(0);
+
+    fixture.componentInstance.rangePicker.open();
+    fixture.detectChanges();
+    tick();
+
+    const fromDate = new Date(2020, 0, 1);
+    const toDate = new Date(2020, 0, 2);
+    fixture.componentInstance.rangePicker.select(fromDate);
+    fixture.componentInstance.rangePicker.select(toDate);
+    fixture.detectChanges();
+    tick();
+
+    expect(fixture.componentInstance.startDateModelChangeCount).toBe(1, 'Start Date 1');
+    expect(fixture.componentInstance.endDateModelChangeCount).toBe(1, 'End date 1');
+
+    fixture.componentInstance.rangePicker.open();
+    fixture.detectChanges();
+    tick();
+
+    const fromDate2 = new Date(2021, 0, 1);
+    const toDate2 = new Date(2021, 0, 2);
+    fixture.componentInstance.rangePicker.select(fromDate2);
+    fixture.componentInstance.rangePicker.select(toDate2);
+    fixture.detectChanges();
+    tick();
+
+    expect(fixture.componentInstance.startDateModelChangeCount).toBe(2, 'Start Date 2');
+    expect(fixture.componentInstance.endDateModelChangeCount).toBe(3, 'End date 2');
+  }));
+
 });
 
 @Component({
@@ -959,8 +998,24 @@ class RangePickerNgModel {
   @ViewChild(MatStartDate, {read: ElementRef}) startInput: ElementRef<HTMLInputElement>;
   @ViewChild(MatEndDate, {read: ElementRef}) endInput: ElementRef<HTMLInputElement>;
   @ViewChild(MatDateRangePicker) rangePicker: MatDateRangePicker<Date>;
-  start: Date | null = null;
-  end: Date | null = null;
+  private _start: Date|null = null;
+  set start(aStart: Date|null) {
+    this.startDateModelChangeCount++;
+    this._start = aStart;
+  }
+  get start(): Date|null {
+    return this._start;
+  }
+  private _end: Date|null = null;
+  set end(anEnd: Date|null) {
+    this.endDateModelChangeCount++;
+    this._end = anEnd;
+  }
+  get end(): Date|null {
+    return this._end;
+  }
+  startDateModelChangeCount = 0;
+  endDateModelChangeCount = 0;
 }
 
 

src/material/datepicker/date-selection-model.ts

@@ -42,6 +42,9 @@ export interface DateSelectionModelChange<S> {
 
   /** Object that triggered the change. */
   source: unknown;
+
+  /** Previous value */
+  oldValue?: S;
 }
 
 /**
@@ -69,8 +72,9 @@ export abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<
    * @param source Object that triggered the selection change.
    */
   updateSelection(value: S, source: unknown) {
+    const oldValue = (this as {selection: S}).selection;
     (this as {selection: S}).selection = value;
-    this._selectionChanged.next({selection: value, source});
+    this._selectionChanged.next({selection: value, source, oldValue});
   }
 
   ngOnDestroy() {

tools/public_api_guard/material/datepicker.d.ts

@@ -13,6 +13,7 @@ export declare class DateRange<D> {
 }
 
 export interface DateSelectionModelChange<S> {
+    oldValue?: S;
     selection: S;
     source: unknown;
 }
@@ -405,6 +406,7 @@ export declare class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
     protected _assignValueToModel(value: D | null): void;
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
     _onKeydown(event: KeyboardEvent): void;
+    protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean;
     ngDoCheck(): void;
     ngOnInit(): void;
     static ngAcceptInputType_disabled: BooleanInput;
@@ -516,6 +518,7 @@ export declare class MatStartDate<D> extends _MatDateRangeInputBase<D> implement
     protected _assignValueToModel(value: D | null): void;
     protected _formatValue(value: D | null): void;
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
+    protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean;
     getMirrorValue(): string;
     ngDoCheck(): void;
     ngOnInit(): void;