fix(datepicker): end input reset on load when bound through ngModel (#19176)

This is something I found while I was writing the live examples. When both the start and end inputs have an initial value bound through `ngModel`, the start resets the end, because the end's value wasn't yet defined at the time the start was assigning its value. These changes fix the issue by treating the entire input as a single unit when it comes to change events.

Author: crisbeto

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

@@ -224,7 +224,12 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpd
 
   protected _assignValueToModel(value: D | null) {
     if (this._model) {
-      this._model.updateSelection(new DateRange(value, this._model.selection.end), this);
+      const range = new DateRange(value, this._model.selection.end);
+
+      // Note that we pass the range input as the source of the event, rather than the current
+      // field, because we treat the whole input as a single unit and we don't want the two
+      // inner inputs to respond to each other's changes.
+      this._model.updateSelection(range, this._rangeInput);
     }
   }
 
@@ -304,7 +309,12 @@ export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements CanUpdat
 
   protected _assignValueToModel(value: D | null) {
     if (this._model) {
-      this._model.updateSelection(new DateRange(this._model.selection.start, value), this);
+      const range = new DateRange(this._model.selection.start, value);
+
+      // Note that we pass the range input as the source of the event, rather than the current
+      // field, because we treat the whole input as a single unit and we don't want the two
+      // inner inputs to respond to each other's changes.
+      this._model.updateSelection(range, this._rangeInput);
     }
   }
 

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

@@ -1,5 +1,5 @@
 import {Type, Component, ViewChild, ElementRef} from '@angular/core';
-import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
+import {ComponentFixture, TestBed, inject, fakeAsync, tick} from '@angular/core/testing';
 import {FormsModule, ReactiveFormsModule, FormGroup, FormControl} from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {OverlayContainer} from '@angular/cdk/overlay';
@@ -452,6 +452,20 @@ describe('MatDatepicker', () => {
     expect(rangeTexts).toEqual(['2', '3', '4', '5']);
   });
 
+  it('should preserve the preselected values when assigning through ngModel', fakeAsync(() => {
+    const start = new Date(2020, 1, 2);
+    const end = new Date(2020, 1, 2);
+    const fixture = createComponent(RangePickerNgModel);
+    fixture.componentInstance.start = start;
+    fixture.componentInstance.end = end;
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.start).toBe(start);
+    expect(fixture.componentInstance.end).toBe(end);
+  }));
+
 });
 
 @Component({
@@ -524,3 +538,21 @@ class RangePickerNoStart {}
 })
 class RangePickerNoEnd {}
 
+
+@Component({
+  template: `
+    <mat-form-field>
+      <mat-date-range-input [rangePicker]="rangePicker">
+        <input matStartDate [(ngModel)]="start"/>
+        <input matEndDate [(ngModel)]="end"/>
+      </mat-date-range-input>
+
+      <mat-date-range-picker #rangePicker></mat-date-range-picker>
+    </mat-form-field>
+  `
+})
+class RangePickerNgModel {
+  start: Date | null = null;
+  end: Date | null = null;
+}
+