-
Notifications
You must be signed in to change notification settings - Fork 112
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
Comments
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 <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
|
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. |
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
Paste Core Version
latest
Browser
Google Chrome 123.0.6312.124
Operating System
Additional Information
We should keep the behavior consistent for accessibility purposes.
The text was updated successfully, but these errors were encountered: