bug(autocomplete): up arrow/down arrow + ngIf causing a crash

[alexw10]

Bug, feature request, or proposal:

There is an issue currently that occurs ONLY if the Angular application is in development mode.
If it is running in production mode this does not occur.

Error: Expression has changed after it was checked. Previous value: 'md-option-2'. Current value: 'null'.
at ExpressionChangedAfterItHasBeenCheckedError.ZoneAwareError (http://localhost:4201/vendor/zone.js/dist/zone.js:958:33)
at ExpressionChangedAfterItHasBeenCheckedError.BaseError [as constructor] (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:1174:20)
at new ExpressionChangedAfterItHasBeenCheckedError (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:6535:20)
at checkBinding (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:6710:23)
at Wrapper_MdAutocompleteTrigger.checkHost (/MdAutocompleteModule/MdAutocompleteTrigger/wrapper.ngfactory.js:51:7)
at View_AutocompleteDemo1.detectChangesInternal (/DemoAppModule/AutocompleteDemo/component.ngfactory.js:118:35)
at View_AutocompleteDemo1.AppView.detectChanges (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:12584:18)
at View_AutocompleteDemo1.DebugAppView.detectChanges (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:12731:48)
at ViewContainer.detectChangesInNestedViews (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:12842:41)
at CompiledTemplate.proxyViewClass.View_AutocompleteDemo0.detectChangesInternal (/DemoAppModule/AutocompleteDemo/component.ngfactory.js:950:15)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:12584:18)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:12731:48)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:12569:22)
at CompiledTemplate.proxyViewClass.View_AutocompleteDemo_Host0.detectChangesInternal (/DemoAppModule/AutocompleteDemo/host.ngfactory.js:29:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4201/vendor/@angular/core/bundles/core.umd.js:12584:18)

What is the expected behavior?

When clicking into the autocomplete the panel opens up, when navigating via the up/down arrow keys, then when typing in it should not crash and panel should be filtered properly.

What is the current behavior?

Current behavior is when doing what I mentioned above the app will crash with the "Expression has changed after it has been checked". Like I mentioned this does not occur if the application is in production mode. EX: the https://material.angular.io/ site works just fine but when cloning material2 and running the demo-app this error occurs.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

PLUNKER:
http://plnkr.co/edit/hxbnHiZ7Ll8kp5rN4bhu?p=preview

To reproduce click the drop down, press down arrow on keyboard, Hit any letter such as "A" and crash will occur.

What is the use-case or motivation for changing an existing behavior?

To me this is a decently important issue as in development mode, so anyone that is not running in production the app can crash in this scenario which is pretty annoying, and after some research the Expression after value checked I have read shouldn't go unfixed. But maybe this isn't the case will see what you all think :)

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

Tested on chrome.
Angular is whatever the plunker is.
Material: Using Angular Material (SHA 4ee2aef) from 3/6/2017, 7:02 PM

Is there anything else we should know?

I have dug into the root of this problem a little bit and have determined the root cause of the code is this:
https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L57

It seems like with this commented out it all works, but guessing that line is needed for screen readers/accessibility. I have been unable to figure out a fix for this though, which is why I am just going to put up the issue and hopefully you guys will know.

[kara]

Note to self: to repro:

1. Must have *ngIf on the trigger
2. Must hit down arrow then type. (If you type then hit down arrow, nothing errors.)

[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.}