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

…21846)
angular · Apr 10, 2021 · e1f1585 · e1f1585
1 parent ff69e19
commit e1f1585
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/material/datepicker/date-range-input-parts.ts b/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);

diff --git a/src/material/datepicker/date-selection-model.ts b/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() {

diff --git a/tools/public_api_guard/material/datepicker.d.ts b/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;