Datepicker ExpressionChangedAfterItHasBeenCheckedError on disable with focus

[oliveti]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

It should be possible to disable a focused date picker

What is the current behavior?

An error is raised when the datepicker field is disabled when the field is focused.

Error message :
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-input-invalid: true'. Current value: 'mat-input-invalid: false'.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-date-picker-cd-focus

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material : 5.1.0

Is there anything else we should know?

It works is the field is programmatically blurred before being disabled.

[devversion]

Just want to collect what I figured out while debugging this issue.

1. The datepicker input has a custom ControlValueAccessor
2. Whenever disable() is being called (_first CD), the datepicker input only knows about it
3. The datepicker input just queues in a new CD, to set the [disabled] binding on the input element.
4. If that happens, and the input is focused, it will be blurred automatically due to the disabled state. This means that there will be another change detection round that then notifies a modified errorState due to the native input elements disabled state (invalid always set to false)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}