Autocomplete: Auto activate top suggestion in panel

[Stas-tolpekin]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

A user starts to write text and when sees that top option is suited just presses Enter (top option is selected)

What is the current behavior?

A user starts to write text and when sees that top option is suited he must first press 'Down' and only after that 'Enter'.

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

A user can select top option faster. a user filling a big form can spend less time.

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 All supported browsers

Is there anything else we should know?

I think the best way is to make this feature switchable via input property

[jelbourn]

I'm not sure if this would play well with the expected interaction pattern for role="combobox" for screen-readers.

[antosdaniel]

Hacky solution until official support arrives: You can watch for options changes and use autocomplete._keyManager.setFirstItemActive().

I'm setting options manually, so I ended up with something like this:

class Component {
    @ViewChild('autocomplete') autocomplete: MdAutocomplete;

    changeOptions(options) {
        this.options = options;
        setTimeout(() => this.autocomplete._keyManager.setFirstItemActive());
    }
}

<md-autocomplete #autocomplete="mdAutocomplete">
    <md-option *ngFor="let option of options">
        {{ option }}
    </md-option>
</md-autocomplete>

[thw0rted]

I would love to see official support for this behavior with a simple property on the directive. Note that this would have to be carefully negotiated if used in conjunction with selection-follows-focus ( #4951 ) -- we'd have to differentiate between an "active" item that the user has navigated to and an "active" item that we've highlighted in preparation for the user hitting Enter (or, and I hate having to keep this fight going, Tab).

As an aside, the autocomplete right here in Github agrees with me -- type an octothorpe here in the comment editor and you immediately get a list of suggested issues to reference. The first one is highlighted immediately, though you can of course keep typing to narrow the list, and pressing tab activates the highlighted item, because that's what we've been trained to expect. (Again, if this is incompatible with a particular a11y philosophy, I would argue that the solution is not to hobble the non-screen-reader experience but to modify behavior specifically for screen-reader users.)

[crisbeto]

Resolved by https://github.com/angular/material2/commit/b42fcb9ca878bd3f3e9fba24ce91af6a68250ce4.

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