Components: Bug - Can't select an option in autocomplete IE 11

[allen-gopico]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When selecting an option in the auto complete , it should display the selected value in the text field

What is the current behavior?

When selecting an option in the auto complete, it does not display the selected value in the text field

What are the steps to reproduce?

1. https://material.angular.io/components/component/autocomplete
2. Go to example
3. Type Ala
4. Select Alabama

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

IE 11

[crisbeto]

Are you talking about selecting by click or with the keyboard? The click issue should be resolved by https://github.com/angular/material2/pull/3188.

[allen-gopico]

I'm referring to selecting by clicking , i've tried changing the md-option to mat-option but i've encounter an error (see image). I'm still looking for the cause.

[crisbeto]

The mat- prefix is opt-in, md- is the one that is on by default. As for the clicking issue, it'll be resolved by #3188.

[Only1MrAnderson]

@crisbeto When do you anticipate the pull request will be merged?

[djleonskennedy]

Please clarify, when it will be merged, its very critical issue

[benjamin-wilson]

Looks like it's pending review from @kara, this is a critical issue for us as well.

[Only1MrAnderson]

@djleonskennedy @benjamin-wilson . If you are looking for a short term solution here is what I am doing. Needed this for production and the merge is taking longer then I expected.
@angular/material/@angular/material.es5.js.

Change this one section
FROM:

     MdAutocompleteTrigger.prototype._handleBlur = function (newlyFocusedTag) {
         this._onTouched();
         // Only emit blur event if the new focus is *not* on an option.
         if (newlyFocusedTag !== 'MD-OPTION') {
             this._blurStream.next(null);
         }
     };

TO:

MdAutocompleteTrigger.prototype._handleBlur = function(newlyFocusedTag) {
        this._onTouched();
        if (newlyFocusedTag == null) {
            newlyFocusedTag = document.activeElement.className.indexOf('mat-option') >= 0 ? 'MD-OPTION' : '';
        }
        // Only emit blur event if the new focus is *not* on an option.
        if (newlyFocusedTag !== 'MD-OPTION') { //newlyFocusedTag !== 'MD-OPTION'
            this._blurStream.next(null);
        }
    };

[vinaykumaremmadi]

Thanks...by changing the code in @angular/material/@angular/material.es5.js.
It worked

[vinaykumaremmadi]

how to update material component..instead of changing it manually.

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