Better support for keyboard interaction?

[bobaekang]

I've noticed that <MultiSelect> works quite differently from, say, a native <select> tag when using keyboard to interact with it. I think it would be great if the component can behave similarly to how <select> works.

For instance, native <select> dropdown opens when I hit spacebar while on focus. Hitting tab closes the dropdown, and hitting tab once more will move the focus to the next element.

In contrast, <MultiSelect> dropdown opens on hitting arrow down while on focus, and there is no apparent way to close it using keyboard only without losing focus.¹ In fact, if I hit tab while the dropdown is open, the focus is moved to another element but the dropdown remains open. I believe this different behavior can be confusing to users other than myself.

Footnotes

1. For your reference, with react-select's multi select component, hitting spacebar (or arrow down key) opens dropdown, and hitting escape closes dropdown without losing focus. ↩

[harshzalavadiya]

@bobaekang,

I totally agree it should behave similar to native select component, I'll try to fix this once I get some time

[harshzalavadiya]

@bobaekang,

I have tried to fix most accessablity issues as of now in v3.0.0

• pressing space or down arrow will open dropdown component
• pressing esc will close dropdown and focus will be preserved this will bring it bit closer to native <select/>