fix(datepicker): changed after checked error if focused datepicker inputs turn disabled (#9717)

In some situations, the `disable()` method of a form control is called while the datepicker input is focused. This causes a changed after checked error.

Normally, native input elements automatically blur if they turn disabled. This behavior is problematic, because it would mean that it triggers another change detection cycle, which then causes a changed after checked error if the input element was focused before.

Fixes #9559

Author: devversion

src/lib/datepicker/datepicker-input.ts

@@ -161,6 +161,13 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
       this._disabled = newValue;
       this._disabledChange.emit(newValue);
     }
+
+    if (newValue) {
+      // Normally, native input elements automatically blur if they turn disabled. This behavior
+      // is problematic, because it would mean that it triggers another change detection cycle,
+      // which then causes a changed after checked error if the input element was focused before.
+      this._elementRef.nativeElement.blur();
+    }
   }
   private _disabled: boolean;