ref(compactSelect): Auto-select single option on Enter when searching#112652
ref(compactSelect): Auto-select single option on Enter when searching#112652
Conversation
When a user searches and narrows the list down to exactly one visible option, pressing Enter now selects that option automatically instead of doing nothing. If multiple options are still visible, Enter continues to have no effect (preventing accidental selections). Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 600d51b. Configure here.
…n Enter The previous logic filtered to enabled-only options and checked if exactly one remained. This caused a false positive: when a search matched two visible options where one was disabled, enabledOptions.length was 1 and Enter would auto-select — even though the user could see two items in the list. Fix by counting all visible options first. Auto-select only fires when there is exactly one visible option total and that option is not disabled. Add a regression test covering the one-enabled / one-disabled case. Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
…tion Assign the first visible option to a const and guard with a truthiness check before calling click(), making the code runtime safe rather than relying on a non-null assertion operator. Co-Authored-By: Claude <noreply@anthropic.com>
| firstOption && | ||
| firstOption.getAttribute('aria-disabled') !== 'true' | ||
| ) { | ||
| firstOption.click(); |
There was a problem hiding this comment.
I don’t think going via the dom is what we should be doing here. Control has access to all items, so it should know if there’s only one item. It doesn’t have access to onChange, but what we probably should do is something similar that onClear is doing, because in the parent, we can easily invoke onChange:
sentry/static/app/components/core/compactSelect/compactSelect.tsx
Lines 219 to 230 in 7508699
Concretely, I’d suggest:
- add on
onEntercallback - have the parent decide:
- if there is only one element in
items, invokeonChange. close select if necessary (shouldCloseOnSelect, seeonClear. This could be extracted to its own functiontriggerOnChange. - if there are more items, maybe we could have
Enterfocus the list instead like tab does?
- if there is only one element in

When a user types in the search box and narrows the list down to exactly one visible option, pressing Enter now automatically selects that option. Previously Enter was a no-op in the search input (it only prevented form submission).
The implementation queries enabled (non-hidden, non-disabled) list items in the overlay on Enter. Hidden options are already marked
aria-disabledby the list state, so filtering on that attribute cleanly identifies what's actually selectable. If exactly one item is left, it receives a programmatic click, going through the normal React Aria selection path includingonChangeand the menu closing logic.When multiple options are still visible, Enter continues to do nothing, avoiding accidental selections.