Autocomplete - add option to always treat first option as active

[lcecil]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

Should be able to manually/programmatically set the first option in the autocomplete panel as the activeOption, so that it receives the appropriate styles and is selected when the user presses enter.

What is the current behavior?

User must either use the down key or hover with the mouse on the option to make it active.

What are the steps to reproduce?

N/A

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

Our users are going to be limited to selecting only options from the autocomplete. We're experiencing problems where users are either typing in a partial value or the full value, hitting the enter key, and not understanding why that option isn't being selected.

See attached images

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

Angular - 4.4.6
Material - 2.0.0-beta.12

Is there anything else we should know?

There is a way to select the first option by using matAutocomplete.options.first.select() and binding that to the keyup.enter event. I can also forcibly set the active styles on the first option by using matAutocomplete.options.first.setActiveStyles() but this doesn't set the first option as the activeOption. Without that, the key manager doesn't know that the first option is already highlighted and pressing the DOWN_ARROW should make the second option active.

The typeahead using bootstrap and AngularJS has the exact desired behavior for a working example: https://angular-ui.github.io/bootstrap/#!#typeahead

[myagoo]

I don't know how but this exact feature seems to be working in https://teradata.github.io/covalent/#/components/chips (which use material 5 internally). After some research, I did not find any call the methods cited above

[lcecil]

@myagoo Thanks, yes that's as far as I've gotten right now. But if you use the keyboard to navigate up or down in their autocomplete menu, it's not working properly:

They're probably doing what I mentioned above - use the .select() method on enter, and .setActiveStyles() to make the first option seem active.

[jelbourn]

@crisbeto we have some folks inside Google asking for this (or something close enough). Now that I look at it, I think this is an important feature to add. A good example of the behavior I have in mind is the "Enter action" or "Open file by name" pop-ups in WebStorm; you need to be able to start entering a string and hit enter as soon as your desired match is on top.

For API, I'm thinking something like firstOptionAlwaysActive (I'm at a loss for anything shorter). It might also be nice to make a provider that could make this the default behavior.

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