Vuetify: [Feature request] Combo box

[jacekkarczmarczyk]

As discussed in discord - would be nice if we have a combo box (I'll follow the new issue rules, otherwise I will have to close my own issue for not following the rules)

• What will it allow you to do that you can't do today?

It will allow us to have a combo box - a component where you can pick up the value from the list or provide your own text.
Additionally it might add a new item to the list (functionality hidden behind some prop), but personally I think i should be handled by the dev

• How will it make current work-arounds straightforward?

Workaround proposed by John https://codepen.io/johnjleider/pen/wrWNaq?editors=1011 almost solves a problem, but only in the case when we want to add new items to the list which is not always true, sometime we want the original items list remain unchanged

• What potential bugs and edge cases does it help to avoid?

Just a new feature

[ajsutton]

One key behaviour I'd look for in this is the ability for a user to enter an arbitrary value and simply tab out of the field (or click elsewhere) for it to "take". With the example codepen the user has to type enter to add the new value to the list. Basically the user should be able to ignore the autocomplete entirely and just treat it as a normal text field.

https://github.com/ajsutton/moolah/blob/master/src/components/transactions/AutoCompletePayee.vue is my version of that but it doesn't work too well in 0.15 because of #1726. I've distilled the essence of that into https://codepen.io/ajsutton/pen/JrydOy?editors=1011 but even using the beta version it seems to be running into #1726 .

[KaelWD]

@ajsutton You need to update the model on nextTick: https://codepen.io/anon/pen/yzoOzN?editors=1011

[valpet]

I agree with ajsutton on the importance of the ability to enter an arbitrary value and then tab out for it to take. In my case I would also need the combobox to be optimistic, automatically auto-completing the first match without the user having to use the arrow keys to select a value from menu. The autocompleted part of the text field need to be selected so the user can continue typing seamlessly. Using the arrow keys up and down will select from the menu, the autocompleted part selected and the part of the text field the user typed in himself preserved. Hitting enter will remove the selection, putting the cursor to the right-most position in the text field, making it so the textfield looks like if the user typed the value manually. Hitting enter is not necessary for the value to take, it should be enough to just tab out (blur)

[KaelWD]

@valpet I've prototyped that behaviour, you can see screenshots of it in #1790

[timbomckay]

Looking at autocomplete and combobox and I'm trying to figure out the difference between the two, aside from styles. Is one of them essentially the other with more or less functionality? Not sure when to use one over the other.

(Sorry if this isn't the place to ask this question but figured it was relevant to the "issue")

[jacekkarczmarczyk]

Combobox:

a component where you can pick up the value from the list or provide your own text.

Autocomplete doesn't let you provide the value that is not on the list

If you have any additional questions, please reach out to us in our Discord community.