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

Author: mcalmus

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

@@ -261,6 +261,17 @@ 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 +376,17 @@ 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-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;