fix: Keep focus on input after select to improve accessibility

[Pytal]

Keep focus on the input after option selection and when hitting the Escape key to comply with W3C accessibility guidelines as demonstrated and described in:

• Single-select example
• Multi-select example

[netlify]

👷 Deploy request for vueselect accepted.

Name	Link
🔨 Latest commit	a7af988
🔍 Latest deploy log	https://app.netlify.com/sites/vueselect/deploys/639bdcf153bbb5000996213a

[sagalbot]

Thanks for this! This behaviour is definitely how the component should work. This needs some refining though before I can merge. After a selection has been made, the input still has focus, but it's unresponsive. There's no way to bring the dropdown back up after a selection was made since the open state is tied to input focus.

I think what likely needs to happen, is the outer div of the template gets tabindex="0", and when it is focused and a key is pressed, the dropdown opens and if filterable=true, focus is moved to the input box. I am fixing this in the next major release, but if you'd like to take a try at this, please do.

[Pytal]

Thanks for this! This behaviour is definitely how the component should work. This needs some refining though before I can merge. After a selection has been made, the input still has focus, but it's unresponsive. There's no way to bring the dropdown back up after a selection was made since the open state is tied to input focus.

I think what likely needs to happen, is the outer div of the template gets tabindex="0", and when it is focused and a key is pressed, the dropdown opens and if filterable=true, focus is moved to the input box. I am fixing this in the next major release, but if you'd like to take a try at this, please do.

No problem and thanks for taking a look! I've tried reproducing this locally and on https://deploy-preview-1727--vueselect.netlify.app/sandbox.html but both seem to work for me as after selecting an option I can hit Enter to reopen the dropdown and make another selection. Which steps can I take to reproduce the unresponsiveness?

[sagalbot]

Here's what we'll need. These are basically test cases.

After a selection has been made and the dropdown is closed but the input remains in focus:

• pressing one of up/down/enter/space keys will display the dropdown and focus the selected item
• pressing return should not select a new option
  • right now if you select an option, hit down twice, then return, you'll have a new selection
  • the return keypress that opens the menu I think is actually just re-selecting the currently highlighted option
• pressing any alphanumeric key should open the dropdown and start filtering

In the next major, clicking into the search input when filterable is true will not immediately open the dropdown until an additional key is pressed. Clicking the toggle icon will still always open the dropdown.

[Pytal]

Made the changes and added some tests, what do you think @sagalbot?

[sagalbot]

This is looking awesome. A huge upgrade to accessibility for the component and something that I've really wanted to fix for a long time now. Thanks @Pytal!

[sagalbot]

Released in v3.20.1. Thank you @Pytal for the awesome contributions.

You might want to consider setting up a GitHub sponsor profile.. just sayin!

[Yury-Shautsou-GY]

Hi all! You are doing an excellent work.

But we have one problem with this new behavior after the 3.20.1 updates.

On the input event, we call the API and open the bootstrap-vue b-modal dialog before the endpoint call completes. After closing the modal dialog, the dropdown list reopens, and this new behavior is something we don't expect at all. How can we leave the dropdown menu closed after closing the modal dialog.

Maybe new props need to be made to prevent this behavior?!

Thanks!

[sagalbot]

Thanks, @Yury-Shautsou-GY if possbile, could you provide a reproduction link?