Keyboard selection broken with Select when options include spaces - react-aria-components

[subvertallchris]

Provide a general summary of the issue here

The native HTML select element allows one to focus and then type an option name, like "new york" to select it. The Select element from react-aria-components instead opens the menu when spacebar is pressed and does not respect the spacebar as part of the typed selection state. Keyboard selection is broken as a result.

🤔 Expected Behavior?

One should be able to focus on a Select and type a multi-word option.

😯 Current Behavior

This fails as soon as you hit the space bar. See https://codesandbox.io/p/sandbox/async-flower-lj4gz5 for a usable demo. It also includes an example of the native select element.

Note that if you open the menu first and then type, "New York" can be selected.

💁 Possible Solution

I would expect some combination of the following

• Spacebar key press should be passed as text input to the select
  • Perhaps this will only happen if the user has typed other keys to signify they are currently typing to select an option?
• A user should be able to disable the spacebar as a way of opening the listbox

🔦 Context

The ability to quickly navigate and fill in forms is something I expect with all form elements. I hit this repeatedly while working on an e-commerce system, where Select Option elements might be multiple words. You'll notice that all of the examples on in the docs are single words, so it wouldn't be immediately obvious.

🖥️ Steps to Reproduce

See the reproduction here https://codesandbox.io/p/sandbox/async-flower-lj4gz5.

Version

1.1.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

Looks like https://github.com/adobe/react-spectrum/pull/869 handled this in listbox, but we'll need to review the behavior to see why it doesn't work for select.

[subvertallchris]

Hey @reidbarber, thanks for taking a look. Any thoughts on the effort level or timeline? Is this something I can reasonably investigate on my own? I'm trying to decide if I should swap my Select implementation for a native HTML select in the meantime.

[reidbarber]

I would guess it wouldn't be too difficult of a fix once the cause is identified. Another related PR to look at is #1374. This maybe something to look at:

https://github.com/adobe/react-spectrum/blob/a8ec9667a2b70b88b45e329bf44918f0f93d54f9/packages/%40react-aria/select/src/useSelect.ts#L133-L134

There is a useSelect story in storybook that would make a quick feedback loop to test things. The main thing to look for is why the event makes it all the way to the onKeyDown handler in useMenuTrigger.