keyboard access: add a way to re-open without re-focusing

[WofWca]

https://vue-select.org/sandbox.html

1. Use keyboard.
2. Focus the vue-select.
3. Select an option (e.g. by pressing Enter).

Can't open the dropdown again without pressing Tab, then Shift + Tab.

Check out how the native select behaves: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

Describe the solution you'd like Re-open the dropdown when Enter is pressed.

Describe alternatives you've considered

Additional context

[sagalbot]

@WofWca this had me rethink the structure of the component. #1067 swaps out the root div for a button element instead, which allows the behavior to match the native <select>.

I'm not sure if it will be considered a breaking change or not yet.. The signature of some methods will change, and so will the template, but the consumer implementation is unchanged.

[cricard7]

@WofWca Im not sure if this helps - a bit late commenting but I just came across this as well. Added :closeOnSelect= false on the component which allows you to enter multiple items without leaving the select.

[mathiash98]

Adding a listener on arrowDown and arrowUp while input is in focus should open the dropdown in my opinion. This is the behavior I have used in my previous custom made select component. Edit: I see that this is not how normal select operate (it opens on enter)

[s-at-dq]

I can report that this problem still exists:

We use vue-select in one project for displaying a multi-select (a select that allows selecting multiple entries). When the multi-select is focused, it opens (as a drop-down) and all its entries are read by a screenreader. After I selected one entry with the enter key, the focus moves outside of the multi-select to some invisible element and has to be moved back to the multi-select with Shift + Tab.

I would have expected that the multi-select is still focused after selecting one entry so that I can directly use the arrow keys and the enter key to select another entry.