Combobox Spacebar doesn't work for selection

[cogwizzle]

Description

When I tab to a combobox component, press down to open the menu, and press spacebar over the option I want to select, the web page scrolls. I expect that the item in the combobox should be selected as it does with native select box behavior.

Link to Reproduction

https://codesandbox.io/p/sandbox/condescending-bird-c8n738?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cluwsunvp00063b6lyjyyl8me%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cluwsunvp00023b6l33z3ek56%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cluwsunvp00033b6l7lh8m3ma%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cluwsunvp00053b6lp4uz8hrd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cluwsunvp00023b6l33z3ek56%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluwsunvp00013b6laml05d80%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A5%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A5%252C%2522endColumn%2522%253A1%257D%255D%257D%255D%252C%2522id%2522%253A%2522cluwsunvp00023b6l33z3ek56%2522%252C%2522activeTabId%2522%253A%2522cluwsunvp00013b6laml05d80%2522%257D%252C%2522cluwsunvp00053b6lp4uz8hrd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluwsunvp00043b6lz4pnsb6c%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cluwsunvp00053b6lp4uz8hrd%2522%252C%2522activeTabId%2522%253A%2522cluwsunvp00043b6lz4pnsb6c%2522%257D%252C%2522cluwsunvp00033b6l7lh8m3ma%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cluwsunvp00033b6l7lh8m3ma%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

1. Click combo box.
2. Press down arrow.
3. Press space.
4. See scroll.
5. Repeat with selectbox and see no scroll, rather option selected.

Paste Core Version

latest

Browser

Google Chrome 123.0.6312.124

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

We should keep the behavior consistent for accessibility purposes.

[dosubot[bot]]

To resolve the issue with the combobox component where pressing the spacebar causes the page to scroll instead of selecting an item, you can modify the getInputProps call within your component. Specifically, add an onKeyDown event handler to prevent the default action when the spacebar is pressed. Here's an example of how you can implement this:

<ComboboxInputSelect
  {...getToggleButtonProps({ tabIndex: 0 })}
  {...getInputProps({
    onKeyDown: (event: React.KeyboardEvent) => {
      if (event.key === ' ') {
        event.preventDefault();
      }
      // Include any additional onKeyDown logic here
    },
    // Other props
  })}
/>

This code snippet checks if the pressed key is the spacebar and, if so, prevents the default scrolling behavior. Make sure to integrate this solution in the appropriate file, likely within your project's custom combobox component implementation. This adjustment will help make your combobox's behavior consistent with that of a native select element, enhancing accessibility and user experience.

Sources

• packages/paste-core/components/combobox/src/singleselect/Combobox.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[TheSisb]

Hi @cogwizzle,

Thanks for reporting this! I've added it to our backlog as a bug to fix. We'll report back with updates as we have them.

[nkrantz]

Hey @cogwizzle - finally circling back on this issue. Thanks for taking the time to point it out. I just took a look and came to the conclusion that it's probably safest to not make this change. Combobox as is (using the enter key to select a focused option) meets all of the accessibility requirements for keyboard interactions (see the Combobox APG pattern - Keyboard Interaction section). While it would be nice to align Combobox and Select in their keyboard selection behavior using the space key, we'd only be able to implement that for single-select, non-autocomplete Comboboxes, to avoid complications with type-in Comboboxes. That would cause a disparity in the behavior between variants of Combobox itself, which feels like a greater gap than a disparity between Combobox and Select behavior. In addition to that, we'd have to override some downshift inherited keyboard behaviors, which could potentially cause us to miss important accessibility updates down the line.

Please let me know if that explanation makes sense or if you'd still like to see a change in Combobox behavior!