fix(datepicker): server-side rendering error for disabled input (#10249)

Fixes disabled datepicker inputs throwing an error when rendering on the server.

Fixes #10248.

Author: crisbeto

src/lib/datepicker/datepicker-input.ts

@@ -156,17 +156,19 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
   get disabled(): boolean { return !!this._disabled; }
   set disabled(value: boolean) {
     const newValue = coerceBooleanProperty(value);
+    const element = this._elementRef.nativeElement;
 
     if (this._disabled !== newValue) {
       this._disabled = newValue;
       this._disabledChange.emit(newValue);
     }
 
-    if (newValue) {
+    // We need to null check the `blur` method, because it's undefined during SSR.
+    if (newValue && 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.
-      this._elementRef.nativeElement.blur();
+      element.blur();
     }
   }
   private _disabled: boolean;

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -89,6 +89,14 @@ <h2>Datepicker</h2>
   <mat-datepicker #birthday></mat-datepicker>
 </mat-form-field>
 
+<h2>Disabled datepicker</h2>
+
+<mat-form-field>
+  <input type="text" disabled matInput [matDatepicker]="departureDate" placeholder="Departure date">
+  <mat-datepicker-toggle matSuffix [for]="departureDate"></mat-datepicker-toggle>
+  <mat-datepicker #departureDate></mat-datepicker>
+</mat-form-field>
+
 <h2>Grid list</h2>
 
 <mat-grid-list cols="4">