mat-datepicker is still emitting the valueChanges event prior to the control being blurred

[christopher-brown-rcx]

Even with the form control configured with the "updateOn: 'blur'" option, the mat-datepicker is still sometimes firing the valueChanges event upon each keystroke, rather than waiting for the control to lose focus. This appears to have been partially fixed by #18063, but not completely.

Reproduction

See the following StackBlitz to reproduce this issue: https://stackblitz.com/edit/angular-hp9da4

Steps to reproduce:

1. Type a valid date (e.g. "3/15/19"), and in the Console log, note that valueChanges fires only on blur. (GOOD)
2. Append some alphabetic characters to the valid date to make it invalid, and note that valueChanges fires only on blur. (GOOD)
3. Note that the form has programmatically blanked out the invalid value via FormGroup.patchValue(). (This is key to reproducing the issue.)
4. Now try to type another invalid date value (such as an alphabetic character), and observe that valueChanges fires immediately, rather than waiting for blur. (BAD)

Expected Behavior

Emissions of the valueChanges event are always deferred until the control loses focus, as the documentation for "updateOn: 'blur'" suggests.

Actual Behavior

While in certain invalid states, the control continues to emit events upon each keystroke. This behavior appears to be contingent upon the value of the form control being programmatically modified.

Environment

• Angular: 9.0.2
• CDK/Material: Material 9.1.0
• Browser(s): Chrome 80.0.3987.112 (64-bit), Firefox 73.0 (64-bit), Edge 44.18362.449.0
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 x64

[mmalerba]

Thanks for the easy to follow repro :) I confirmed that it seems to be an issue and made a version with a number input for comparison: https://stackblitz.com/edit/angular-vojnze?file=src/app/app.component.html

[vsavovski]

The simple workaround while this issue is not resolved:

// TODO: Remove this workaround when issue is resolved: https://github.com/angular/components/issues/18640
MatDatepickerInput.prototype['_onInput'] =  function(value: string) {
  let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
  this._lastValueValid = !date || this._dateAdapter.isValid(date);
  date = this._getValidDateOrNull(date);

  if (!this._dateAdapter.sameDate(date, this._value)) {
    this._value = date;
    this._cvaOnChange(date);
    this._valueChange.emit(date);
    this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
  } else {
    // removing faulty this._validatorOnChange() which triggers onChangeEvent even on blur
    // this._validatorOnChange();
  }
};

Not sure does it have any side effects.