Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
WofWca opened this issue Feb 1, 2020 · 4 comments · May be fixed by #1067
Open

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

WofWca opened this issue Feb 1, 2020 · 4 comments · May be fixed by #1067

Comments

@WofWca
Copy link

WofWca commented Feb 1, 2020

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 sagalbot linked a pull request Feb 15, 2020 that will close this issue
9 tasks
@sagalbot sagalbot self-assigned this Feb 15, 2020
@sagalbot
Copy link
Owner

@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
Copy link

cricard7 commented Oct 1, 2020

@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
Copy link

mathiash98 commented Nov 9, 2021

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
Copy link

s-at-dq commented Jun 2, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants