fix(selector): keyboard clear via Delete/Backspace (comboboxes-2)#3365
fix(selector): keyboard clear via Delete/Backspace (comboboxes-2)#3365cixzhang wants to merge 3 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR No new or modified components detected. Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
|
fix merge conflicts |
| options={defaultOptions} | ||
| value={['Apple', 'Banana']} | ||
| onChange={onChange} | ||
| hasClear |
There was a problem hiding this comment.
I'm slightly confused by this. Docs don't say MultiSelector supports hasClear and when I test in playground it doesn't work nevermind it works here now
I'm still a little confused how this activates though? I tried several times and couldn't get it "delete" to do anything when I tried
Screen.Recording.2026-07-02.at.2.17.39.PM.mov
Adds a Delete/Backspace path in useCombobox/useMultiCombobox that clears the value from the closed trigger when hasClear is set, so clearing is not mouse-only. Guarded off in search mode and while the popup is open.
41beb51 to
7f1877e
Compare
Part of the accessibility & keyboard-management program (#3343). Fixes finding
comboboxes-2.Problem
Selector/MultiSelectorexposed clearing a selection only through the mouse-clickable clear button. The audit'scomboboxes-2calls for a keyboard fallback (Delete/Backspace) so a keyboard-only user can clear the value without a pointer. (The clear button's earliertabIndex={-1}was already removed alongside the trigger-focusability fix in #3324, so the button itself is now tabbable; this PR adds the keyboard shortcut.)Fix
useCombobox(Selector) anduseMultiCombobox(MultiSelector) gain an optionalonClearcallback. When the popup is closed,hasClearis set, and there is a value, pressingDeleteorBackspaceclears it —onChange(null)for Selector,onChange([])for MultiSelector.clearValue/clearValuesfunction, so both go through the samechangeAction/optimistic-update flow.hasSearchmode (those keys edit the search query) or while the popup is open (arrow navigation owns interaction there).Tests
Adds 3 Selector + 3 MultiSelector cases: clear via
Delete, clear viaBackspace, and no-clear whenhasClearis unset / nothing is selected. Full Selector + MultiSelector suites green (72 tests), typecheck + lint clean.