NSelect better keyboard input

[jods4]

BTW I just discovered this lib and it's a great set of components! 👏
I'm picky about edge cases and everything working perfectly (e.g. dropdowns close to screen edges, keyboard navigation) and it works better than other components libraries I've tried!

This function solves the problem (这个功能解决的问题)

I would love better keyboard support

Expected API (期望的 API)

Can I suggest some improvements in keyboard handling?

• When the dropdown is closed and NSelect is filterable, typing should open the dropdown and start filtering.
• When dropdown is closed, down arrow key should open the dropdown
• When dropdown is closed and NSelect is clearable, Escape, Backspace and Delete should clear (Escape key should work with all clearable components, Backspace and Delete with all that don't have text input).
• When dropdown is open, Tab should select current item before focusing the next control.
• When dropdown is open and NSelect is not filterable, typing should move current item to quickly navigate long lists.

Related:

• The "hover/keyboard selection" color in the dropdown (light mode) is really, really, light. I have good vision and it's almost invisible, not to mention a11y and minimum contrast.

[07akioni]

• When the dropdown is closed and NSelect is filterable, typing should open the dropdown and start filtering. ❓

This is not a native behavior, it's hard to defined what is typing. I think explicitly activate by enter or space is better.

• When dropdown is closed, down arrow key should open the dropdown✅

• When dropdown is closed and NSelect is clearable, Escape, Backspace and Delete should clear (Escape key should work with all clearable components, Backspace and Delete with all that don't have text input).❓

Backspace and Delete is okay. Why should escape be respoinsible for clear content?

• When dropdown is open, Tab should select current item before focusing the next control. ❌
  This doesn't follows native select element.

• When dropdown is open and NSelect is not filterable, typing should move current item to quickly navigate long lists.✅

[jods4]

This is not a native behavior, it's hard to defined what is typing.

Just tested in Edge/Chromium 93: it doesn't open the dropdown but it does select the first item matching what was typed.

What is typing? I'm gonna say: any printable character?

Why should escape be responsible for clear content?

Escape has been reseting forms since day 1 in browsers.

[About Tab] This doesn't follows native select element.

OK so native behavior (just tested in Edge/Chromium 93) is to commit active item, close the dropdown and leave focus on the select element.

So you can choose if you want to tab away or not, but committing focused item is native behavior.

That being said, the native control is really bad and should probably not be taken as a holy grail of UX.

[07akioni]

This is not a native behavior, it's hard to defined what is typing.

I've tried too and it does work. However I think the interaction is too implicit. Maybe we can implement it but only with a low priority.

Escape has been reseting forms since day 1 in browsers.

Is there any example? I haven't seen it works.
https://stackoverflow.com/questions/3615726/how-do-i-trigger-esc-button-to-clear-text-entered-in-text-box

When I press escape, I never expect to clear the value but just close dropdown.

OK so native behavior (just tested in Edge/Chromium 93) is to commit active item, close the dropdown and leave focus on the select element.

chrome 91, my tab doesn't trigger anything.
https://user-images.githubusercontent.com/18677354/123551876-478e8e80-d7a6-11eb-87a5-a4ce4db865ab.mov

I agree with you about native behavior doesn't mean better UX.

I refer to native behavior because some operations you proposed are what I've never seen before. (I'm not sure but they are probably not a consensus of common web users. For example tab to commit dropdown active item. So I just try if they come from native behaviors.)

[jods4]

Is there any example? I haven't seen it works.

That's strange, I just tried in Chromium 93 and it didn't work.
They must have removed it at some point??
Escape has reset a form input to its initial value (often empty but not necessarily) for years:
https://stackoverflow.com/questions/10244968/esc-key-acts-like-reset-button-in-html

chrome 91, my tab doesn't trigger anything.

That's really strange, maybe it's a Mac thing?
Wouldn't you expect it to move focus, if nothing else?

I tested on PC and when the dropdown is open and you select an item with the keyboard, it commits the selection, closes the dropdown but does not move focus.
(A second Tab on closed dropdown moves focus, of course).

[wc-matteo]

When the dropdown is closed and NSelect is filterable, typing should open the dropdown and start filtering.

My coworker was expecting this as well. If you use the keyboard a lot to navigate around the interface, being able to focus the select and start typing directly is much better than having to press another key. It stops the flow

[07akioni]

My coworker was expecting this as well. If you use the keyboard a lot to navigate around the interface, being able to focus the select and start typing directly is much better than having to press another key. It stops the flow

I'll think of it.