Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combobox Spacebar doesn't work for selection #3858

Open
1 of 3 tasks
cogwizzle opened this issue Apr 12, 2024 · 2 comments
Open
1 of 3 tasks

Combobox Spacebar doesn't work for selection #3858

cogwizzle opened this issue Apr 12, 2024 · 2 comments
Labels
Area: Components Related to the component library (core) of this system Fix/Change in Backlog DSYS has acknowledged this improvement and will update the thread with results when we prioritize it Type: Bug Something isn't working

Comments

@cogwizzle
Copy link
Collaborator

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.

Copy link

dosubot bot commented Apr 12, 2024

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

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.

@dosubot dosubot bot added Area: Components Related to the component library (core) of this system Type: Bug Something isn't working labels Apr 12, 2024
@TheSisb
Copy link
Contributor

TheSisb commented Apr 12, 2024

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.

@serifluous serifluous added the Fix/Change in Backlog DSYS has acknowledged this improvement and will update the thread with results when we prioritize it label Apr 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Components Related to the component library (core) of this system Fix/Change in Backlog DSYS has acknowledged this improvement and will update the thread with results when we prioritize it Type: Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants