Calling reset on a autocomplete FormControl sometimes does not close the autocomplete dropdown.

[neonguru]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Calling reset on the FormControl of an autocomplete UI should close the autocomplete dropdown.

What is the current behavior?

When calling reset on the FormControl of an autocomplete UI, inside the (optionSelected) handler when using a dialog to get the exact value, the autocomplete dropdown does not close.

What are the steps to reproduce?

I have created a plunker that exhibits the bug: plunker
The autocomplete control has the following options:

options = [
{name:'One', value: 10},
{name:'Two', value: 20},
{name:'Two', value: 21},
{name:'Two', value: 22},
{name:'Three', value: 30}
];

The filter only shows the name of the option, and if there are duplicates, it only shows one of them. Then if they select one of the duplicates, it brings up a dialog to refine the selection.

If the user selects options One or Three, the reset works as expected. But if the user selects Two and then one of the options in the dialog, then the reset call does not close the dropdown. Even calling blur on the input control does not fully reset it.

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

I want the user to be able to select on option and not be left with a large autocomplete dropdown blocking much of the page.

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

@angular 5.0.1
@angular/material 5.0.0-rc0
Chrome on windows and Android
FireFox
IE and Edge do not have this problem
Safari unknown

Is there anything else we should know?

I am open to using a workaround.

[willshowell]

I think your plunker didn't save. Also consider using the Stackblitz template since it's quite a bit easier.

[neonguru]

I updated the plunker link, not sure what happened. Here it is again:
https://plnkr.co/edit/dRJJrg?p=preview
I'll try Stackblitz next time...

[willshowell]

Ohh this is because the last focused item (your autocomplete input) is re-focused after the dialog is closed. There has been discussion lately about how this works and should work, maybe @crisbeto can better explain the status/direction of that?

[crisbeto]

Correct, it's because the dialog restores focus to the last element that was focused before it was opened. @willshowell I don't think that the way this works will change too much. @neonguru the autocomplete isn't really meant to be used like this, but you can work around it by blurring the active option before opening the dialog. Here's a forked Plunkr with the workaround.

[neonguru]

Awesome, works like a charm - thanks!

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