Vue-material: [MdAutocomplete] cannot select by using arrow keys

[simoneb]

Steps to reproduce

• click on the autocomplete input to open the autocomplete list
• use keyboard up/down arrows

Which browser?

Chrome Version 69.0.3497.42 (Official Build) beta (64-bit) on Windows

What is expected?

• items in the list are highlighted when selecting them via arrow keys

What is actually happening?

• nothing happens

Reproduction Link

https://codesandbox.io/s/q4nml15y6w

[DavidHtx]

Not sure if it belongs to another bug report, but you cannot select items in the drop down using the mouse either (on Firefox 63.0b2)

[simoneb]

@DavidHtx yes https://github.com/vuematerial/vue-material/issues/1909

[fBrx]

Additionally i observed the following behavior: when you type at least one character in the autocomplete field you can start selecting items with the arrow keys and confirm the selection with enter - internally everything seems to work fine.

Only caveat: Highlighting does not work, so you don't know which item is selected...

[Sti2nd]

Like above comment says; sometimes one can use the arrow keys, but there is no highlighting of the option currently selected.

Sometimes you will instead get errors in the console, just as described in https://github.com/vuematerial/vue-material/issues/1747 .
Reproduce:

1. Begin to type
2. Select the option (using the arrow keys works for me if I have typed at least two characters)
3. Press escape
4. Press backspace once (which should bring up the suggestions again)
5. Try the arrow keys (should give error)

A suggestion from me regarding this component: it would be nice if it was possible to both open on focus and after keystroke. This is for example how Autocomplete in Material for Angular works by default, and it is very useful because one can choose if one want to write or select from the list right away - no writing required.