fix(datepicker): error in IE/Edge for static disabled binding (#18202)

IE/Edge can throw an error for a datepicker input which has a static `disabled` binding. The error is thrown, because static bindings in Ivy are invoked before the element is in the DOM which browsers seem to have an assertion against.

Author: crisbeto

src/material/datepicker/datepicker-input.ts

@@ -18,6 +18,7 @@ import {
   OnDestroy,
   Optional,
   Output,
+  AfterViewInit,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -91,7 +92,12 @@ export class MatDatepickerInputEvent<D> {
   },
   exportAs: 'matDatepickerInput',
 })
-export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, Validator {
+export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, AfterViewInit,
+  Validator {
+
+  /** Whether the component has been initialized. */
+  private _isInitialized: boolean;
+
   /** The datepicker that this input is associated with. */
   @Input()
   set matDatepicker(value: MatDatepicker<D>) {
@@ -169,7 +175,10 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
     }
 
     // We need to null check the `blur` method, because it's undefined during SSR.
-    if (newValue && element.blur) {
+    // In Ivy static bindings are invoked earlier, before the element is attached to the DOM.
+    // This can cause an error to be thrown in some browsers (IE/Edge) which assert that the
+    // element has been inserted.
+    if (newValue && this._isInitialized && element.blur) {
       // 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.
@@ -257,6 +266,10 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
     });
   }
 
+  ngAfterViewInit() {
+    this._isInitialized = true;
+  }
+
   ngOnDestroy() {
     this._datepickerSubscription.unsubscribe();
     this._localeSubscription.unsubscribe();

tools/public_api_guard/material/datepicker.d.ts

@@ -170,7 +170,7 @@ export declare class MatDatepickerContent<D> extends _MatDatepickerContentMixinB
     static ɵfac: i0.ɵɵFactoryDef<MatDatepickerContent<any>, never>;
 }
 
-export declare class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, Validator {
+export declare class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, AfterViewInit, Validator {
     _dateAdapter: DateAdapter<D>;
     _dateFilter: (date: D | null) => boolean;
     _datepicker: MatDatepicker<D>;
@@ -197,6 +197,7 @@ export declare class MatDatepickerInput<D> implements ControlValueAccessor, OnDe
     _onKeydown(event: KeyboardEvent): void;
     getConnectedOverlayOrigin(): ElementRef;
     getPopupConnectionElementRef(): ElementRef;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     registerOnChange(fn: (value: any) => void): void;
     registerOnTouched(fn: () => void): void;