Improve “type to focus” behavior

[jouni]

Description

The user should be able to focus an item by typing some of the first letters of its textual representation (just like with the native <select>).

Currently, it is only possible to focus an item by typing the first letter of it, and subsequent letters focus other items.

Live Demo

https://vaadin.com/components/vaadin-dropdown-menu/html-examples/dropdown-menu-basic-demos

[mstahv]

I can't even make the "first letter typing" work.

[limonte]

I can't even make the "first letter typing" work.

Yeah, it currently works differently from the native input. A user need to open the overlay by pressing Enter or Space and only then it'll be possible to type the first letter.

[mstahv]

Nope, can't make it work :-(

[jouni]

@limonte true, good addition 👍

@mstahv works for me on Safari, Chrome, and Firefox os macOS.

[jouni]

Oh, now I see it. It only works with lowercase letters, not if you use Shift 🙄

[mstahv]

Yep, that's it.

In the example the first letter is upper case, so it naturally typed it in upper case. It might be that it is just me, but I'd say it is quite common to start with capitals if the options start with capitals.

[mstahv]

And yes, if there is a focus in the field and I start typing some option, I'd expect to be able to select an option right away.

[limonte]

Oh, now I see it. It only works with lowercase letters, not if you use Shift 🙄

This is fixed in the latest stable, proof: https://lavender-bolt.glitch.me/

[johannesh2]

I would expect that the value can be selected without opening the overlay by just typing when the focus is on the field. Is this ticket about it or should I create another one? Feel free to close #184 if it's a duplicate of this.

[jouni]

They are related but slightly different. I would keep both open.

[web-padawan]

Fixed by vaadin/vaadin-list-mixin#50 and released as vaadin-list-mixin 2.2.0 🎉