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

• macOS
• Windows
• Linux

Additional Information

We should keep the behavior consistent for accessibility purposes.

[dosubot]

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.