From 46c809728d0ce8184c7a28fd5bfcef24fa96777a Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 8 Feb 2018 22:42:14 +0100
Subject: [PATCH] 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
---
 src/lib/datepicker/datepicker-input.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts
index daa6db14f98..57246be64b1 100644
--- a/src/lib/datepicker/datepicker-input.ts
+++ b/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;