Vuetify: [Feature Request] Autocomplete - Add a prop to auto-select the first option

Created on 5 Jun 2018  路  3Comments  路  Source: vuetifyjs/vuetify

Problem to solve

In the upcoming 1.1 version, the first option of a v-autocomplete will no longer be selected by default because it generates various unexpected side effects in other use cases (see https://github.com/vuetifyjs/vuetify/issues/4136)

Nevertheless, the behavior is still desirable in many situations where submitting the first option as soon as it appears in the result set makes more sense.

Proposed solution

Add an "autoSelectFirst" optional prop with a default value to false.

has PR feature pending team review

Most helpful comment

Let me weigh in on this and copy over my arguments on the topic from the closed duplicate (sorry for that):

There are use cases when users don't do a generic, open search (think YouTube), but know exactly what item they want to look up. Well-trained systems (think Solr) are able to return high-quality results with a very high probability that the first item in the result list is the one the user is looking for.

At the moment, the user needs to actively highlight the item they want using either the "arrow down" key or even the mouse. For an improved UX in particular in scenarios where lots of data needs to be entered that way, it would be a great improvement to have the first item highlighted automatically. That way, users could select the item by simply hitting enter and continue with the next search, without moving their hands to the arrow keys or mouse.

I would also very much welcome a prop to explicitly enforce this.

All 3 comments

I really don't want to be adding more props to the component, but if we do provide an option for this it should be consistent with the aria standards.

It bothers me too but I feel this feature is really important to keep.

I have no issue renaming the prop if there is a better suited name, especially in favor of a standard.
I couldn't find it in your resource though,the behavior matches the example 2 but can't find which attribute is responsible for it.

Let me weigh in on this and copy over my arguments on the topic from the closed duplicate (sorry for that):

There are use cases when users don't do a generic, open search (think YouTube), but know exactly what item they want to look up. Well-trained systems (think Solr) are able to return high-quality results with a very high probability that the first item in the result list is the one the user is looking for.

At the moment, the user needs to actively highlight the item they want using either the "arrow down" key or even the mouse. For an improved UX in particular in scenarios where lots of data needs to be entered that way, it would be a great improvement to have the first item highlighted automatically. That way, users could select the item by simply hitting enter and continue with the next search, without moving their hands to the arrow keys or mouse.

I would also very much welcome a prop to explicitly enforce this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

milleraa picture milleraa  路  3Comments

ricardovanlaarhoven picture ricardovanlaarhoven  路  3Comments

gluons picture gluons  路  3Comments

itanka9 picture itanka9  路  3Comments

aaronjpitts picture aaronjpitts  路  3Comments