Components: mat-select seems to freeze IE11 / Edge

[StephenFluin]

Bug, feature request, or proposal:

Using Material & CDK 6.1.0
Codebase: https://github.com/StephenFluin/angular-update-guide

Code in question: https://github.com/StephenFluin/angular-update-guide/blob/master/src/app/app.component.html#L17-L25

Steps to reproduce:
Using IE 11/ Edge
Visit update.angular.io
Click on one of the mat-selects at the top (such as version from)
Click off of the mat-select with the mouse

What is the expected behavior?

The mat-select should close and update the value of the model

What is the current behavior?

The browser freezes the tab, with no console warnings or errors or messages

[jelbourn]

@crisbeto could you take a look at this one?

[crisbeto]

This one is odd. I can definitely reproduce the issue on update.angular.io, but I'm not able to when cloning the repo and running it locally (both dev mode and production mode). Here's the stack trace I managed to get out of IE, but it's not super helpful:

Error: Out of stack space
        at __BROWSERTOOLS_CONSOLE_SAFEFUNC (eval code:1:139)
        at it (https://update.angular.io/main.51cdd6d6f8572cd7e529.js:1:135286)
        at e.prototype.handleError (https://update.angular.io/main.51cdd6d6f8572cd7e529.js:1:135495)
        at Anonymous function (https://update.angular.io/main.51cdd6d6f8572cd7e529.js:1:151065)
        at t.prototype.invoke (https://update.angular.io/polyfills.756fd188163e6604f2aa.js:1:7964)
        at e.prototype.run (https://update.angular.io/polyfills.756fd188163e6604f2aa.js:1:3212)
        at e.prototype.runOutsideAngular (https://update.angular.io/main.51cdd6d6f8572cd7e529.js:1:141483)
        at e.prototype.tick (https://update.angular.io/main.51cdd6d6f8572cd7e529.js:1:151025)
        at Anonymous function (https://update.angular.io/main.51cdd6d6f8572cd7e529.js:1:149099)
        at t.prototype.invoke (https://update.angular.io/polyfills.756fd188163e6604f2aa.js:1:7964)

It does point to a call to runOutsideAngular, which isn't used either by MatSelect or MatFormField in 6.0, so it could be something else that is throwing it into an infinite loop.

One thing we could try: recently we fixed an infinite loop for outlined form fields (https://github.com/angular/material2/pull/11406), which are used in this case. @StephenFluin can you try to swap out the apperance="outline" with another appearance to see if the issue is still there?

[StephenFluin]

Got back to an IE11/Edge machine after a while and discovered that I can't reproduce it with ng serve, but I can reproduce it with ng build --prod and then serving up the dist folder with something like python -m SimpleHTTPServer.

I switched the appearance and the issue is still there.

[frostbytedata]

@StephenFluin I believe you are absolutely right. It does seem to matter how you build the project. This is still an issue with "@angular/core": "^6.0.2", and "@angular/material": "^6.0.2",. Is there a fix or workaround for this at the moment? Seems to be a pretty serious issue on IE.

[koertvankleef]

I'm still experiencing this on Edge with "@angular/material": "^7.0.0"
It has improved slightly: the value of the model is now updated, but the select does not close and becomes unresponsive. So as it currently stands you can only change the value once.

[crisbeto]

I can't reproduce the issue anymore. Closing.

[angular-automatic-lock-bot[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._}