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

Author: mcalmus

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

@@ -261,6 +261,11 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements
     return modelValue.start;
   }
 
+  protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean {
+    return super._shouldHandleChangeEvent(change) &&
+      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 +370,10 @@ export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
     return modelValue.end;
   }
 
+  protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean {
+    return super._shouldHandleChangeEvent(change) && 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() {