Skip to content

Autocomplete - add option to always treat first option as active  #8423

@lcecil

Description

@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
partial-match
full-match

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

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaroundfeatureThis issue represents a new feature or feature request rather than a bug or bug fix

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions