Autocomplete panel doesn't close when an option click

[Stas-tolpekin]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

After I click on an option (using mouse cursor) the autocomplete suggestion panel should be closed.

What is the current behavior?

When I click on an option (using mouse cursor) the autocomplete suggestion panel closing and immediately opening again. This bug occurs only in Internet Explorer (I tested on version 11).

What are the steps to reproduce?

Plunker:
https://plnkr.co/edit/7zAjuhQJdibmPCaLsulm

Use Internet Explorer 11.

1. Select option in 'State1' using the mouse cursor.
2. Input 'State2' is blocked by 'State1'

Also, this bug can be reproduced on official documentation
https://material.angular.io/components/component/autocomplete

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

I have two autocomplete input. when user select option in one input, the application should do focus on the other input programmatically. With this bug, when user select option in first input, application do focus on the other input, but the suggestion panel of first input stays opened. In result, a user sees two suggestion panels for each input.

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

Angular 4.2.2
Material 2.0.0-beta.6
OS Windows 10 (build 15063.0)
TypeScript 2.3.4
Internet Explorer 11

Is there anything else we should know?

In Chrome, Edge and Firefox this bug does not reproduce.

[julianobrasil]

You don't need two autocompletes to see the problem. The panel just don't close after selecting a state in IE11 without throwing any error.

If you double click the desired item, with short interval between the clicks, it closes the panel. Maybe something with the ripple effect is going wrong in IE11 preventing event bubling.

[kevincaradant]

Hi

I got the same issue today with the latest version of Angular, under IE11 only (Windows 7).

After to check my code, I see it was the [displayWith]="displayWith" which create this bug :/

Indeed, in the displayWith function, I returned '' and an empty string with IE create the problem of panel closing.
If I return ' ' instead of '' for example, it works. Of course I don't want a space in the input of the autoComplete.

NB: No issue under Firefox / Chrome

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