fix(datepicker): unable to type in range inputs

In a previous fix I added some changes so that typing in an input counts as typing inside the entire date range input. The problem is that this causes some extra events to be fired which result in the user's typed value being overwritten as they're typing. These changes revert the previous fix and resolve the issue in a different way.

Author: crisbeto

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

@@ -39,7 +39,7 @@ import {
 } from '@angular/material/core';
 import {BooleanInput} from '@angular/cdk/coercion';
 import {MatDatepickerInputBase, DateFilterFn} from './datepicker-input-base';
-import {DateRange} from './date-selection-model';
+import {DateRange, MatDateSelectionModel} from './date-selection-model';
 
 /** Parent component that should be wrapped around `MatStartDate` and `MatEndDate`. */
 export interface MatDateRangeInputParent<D> {
@@ -158,6 +158,15 @@ abstract class MatDateRangeInputPartBase<D>
   protected _parentDisabled() {
     return this._rangeInput._groupDisabled;
   }
+
+  _registerModel(model: MatDateSelectionModel<DateRange<D>, D>) {
+    // The very first time the range inputs write their values, they don't know about the value
+    // of the opposite input. When this is combined with the fact that `NgModel` defers writing
+    // its value with a `Promise.resolve`, we can get into a situation where the first input
+    // resets the value of the second. We work around it by deferring the registration of
+    // the model, allowing the input enough time to assign the initial value.
+    Promise.resolve().then(() => super._registerModel(model));
+  }
 }
 
 const _MatDateRangeInputBase:
@@ -225,11 +234,7 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpd
   protected _assignValueToModel(value: D | null) {
     if (this._model) {
       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);
+      this._model.updateSelection(range, this);
     }
   }
 
@@ -310,11 +315,7 @@ export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements CanUpdat
   protected _assignValueToModel(value: D | null) {
     if (this._model) {
       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);
+      this._model.updateSelection(range, this);
     }
   }
 

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

@@ -12,7 +12,7 @@ import {FocusMonitor} from '@angular/cdk/a11y';
 import {MatDateRangeInput} from './date-range-input';
 import {MatDateRangePicker} from './date-range-picker';
 
-describe('MatDatepicker', () => {
+describe('MatDateRangeInput', () => {
   function createComponent<T>(component: Type<T>): ComponentFixture<T> {
     TestBed.configureTestingModule({
       imports: [
@@ -218,23 +218,25 @@ describe('MatDatepicker', () => {
     expect(rangeInput.empty).toBe(false);
   });
 
-  it('should mark the range controls as invalid if the start value is after the end value', () => {
-    const fixture = createComponent(StandardRangePicker);
-    fixture.detectChanges();
-    const {start, end} = fixture.componentInstance.range.controls;
+  it('should mark the range controls as invalid if the start value is after the end value',
+    fakeAsync(() => {
+      const fixture = createComponent(StandardRangePicker);
+      fixture.detectChanges();
+      tick();
+      const {start, end} = fixture.componentInstance.range.controls;
 
-    expect(fixture.componentInstance.rangeInput.errorState).toBe(false);
-    expect(start.errors?.matStartDateInvalid).toBeFalsy();
-    expect(end.errors?.matEndDateInvalid).toBeFalsy();
+      expect(fixture.componentInstance.rangeInput.errorState).toBe(false);
+      expect(start.errors?.matStartDateInvalid).toBeFalsy();
+      expect(end.errors?.matEndDateInvalid).toBeFalsy();
 
-    start.setValue(new Date(2020, 2, 2));
-    end.setValue(new Date(2020, 1, 2));
-    fixture.detectChanges();
+      start.setValue(new Date(2020, 2, 2));
+      end.setValue(new Date(2020, 1, 2));
+      fixture.detectChanges();
 
-    expect(fixture.componentInstance.rangeInput.errorState).toBe(true);
-    expect(start.errors?.matStartDateInvalid).toBeTruthy();
-    expect(end.errors?.matEndDateInvalid).toBeTruthy();
-  });
+      expect(fixture.componentInstance.rangeInput.errorState).toBe(true);
+      expect(start.errors?.matStartDateInvalid).toBeTruthy();
+      expect(end.errors?.matEndDateInvalid).toBeTruthy();
+    }));
 
   it('should pass the minimum date from the range input to the inner inputs', () => {
     const fixture = createComponent(StandardRangePicker);
@@ -318,22 +320,24 @@ describe('MatDatepicker', () => {
     expect(startInput.focus).toHaveBeenCalled();
   });
 
-  it('should focus the end input when clicking on the form field when start has a value', () => {
-    const fixture = createComponent(StandardRangePicker);
-    fixture.detectChanges();
-    const endInput = fixture.componentInstance.end.nativeElement;
-    const formFieldContainer = fixture.nativeElement.querySelector('.mat-form-field-flex');
+  it('should focus the end input when clicking on the form field when start has a value',
+    fakeAsync(() => {
+      const fixture = createComponent(StandardRangePicker);
+      fixture.detectChanges();
+      tick();
+      const endInput = fixture.componentInstance.end.nativeElement;
+      const formFieldContainer = fixture.nativeElement.querySelector('.mat-form-field-flex');
 
-    spyOn(endInput, 'focus').and.callThrough();
+      spyOn(endInput, 'focus').and.callThrough();
 
-    fixture.componentInstance.range.controls.start.setValue(new Date());
-    fixture.detectChanges();
+      fixture.componentInstance.range.controls.start.setValue(new Date());
+      fixture.detectChanges();
 
-    formFieldContainer.click();
-    fixture.detectChanges();
+      formFieldContainer.click();
+      fixture.detectChanges();
 
-    expect(endInput.focus).toHaveBeenCalled();
-  });
+      expect(endInput.focus).toHaveBeenCalled();
+    }));
 
   it('should revalidate if a validation field changes', () => {
     const fixture = createComponent(StandardRangePicker);
@@ -404,7 +408,7 @@ describe('MatDatepicker', () => {
     expect(end.nativeElement.getAttribute('max')).toContain('2020');
   });
 
-  it('should pass the range input value through to the calendar', () => {
+  it('should pass the range input value through to the calendar', fakeAsync(() => {
     const fixture = createComponent(StandardRangePicker);
     const {start, end} = fixture.componentInstance.range.controls;
     let overlayContainerElement: HTMLElement;
@@ -414,9 +418,11 @@ describe('MatDatepicker', () => {
       overlayContainerElement = overlayContainer.getContainerElement();
     })();
     fixture.detectChanges();
+    tick();
 
     fixture.componentInstance.rangePicker.open();
     fixture.detectChanges();
+    tick();
 
     const rangeTexts = Array.from(overlayContainerElement!.querySelectorAll([
       '.mat-calendar-body-range-start',
@@ -425,9 +431,9 @@ describe('MatDatepicker', () => {
     ].join(','))).map(cell => cell.textContent!.trim());
 
     expect(rangeTexts).toEqual(['2', '3', '4', '5']);
-  });
+  }));
 
-  it('should pass the comparison range through to the calendar', () => {
+  it('should pass the comparison range through to the calendar', fakeAsync(() => {
     const fixture = createComponent(StandardRangePicker);
     let overlayContainerElement: HTMLElement;
 
@@ -442,6 +448,7 @@ describe('MatDatepicker', () => {
 
     fixture.componentInstance.rangePicker.open();
     fixture.detectChanges();
+    tick();
 
     const rangeTexts = Array.from(overlayContainerElement!.querySelectorAll([
       '.mat-calendar-body-comparison-start',
@@ -450,7 +457,7 @@ describe('MatDatepicker', () => {
     ].join(','))).map(cell => cell.textContent!.trim());
 
     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);