Skip to content

ref(compactSelect): Auto-select single option on Enter when searching#112652

Open
JonasBa wants to merge 3 commits intomasterfrom
jb/ref/compactselect-select
Open

ref(compactSelect): Auto-select single option on Enter when searching#112652
JonasBa wants to merge 3 commits intomasterfrom
jb/ref/compactselect-select

Conversation

@JonasBa
Copy link
Copy Markdown
Member

@JonasBa JonasBa commented Apr 10, 2026

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-disabled by 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 including onChange and the menu closing logic.

When multiple options are still visible, Enter continues to do nothing, avoiding accidental selections.

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>
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 10, 2026
@JonasBa JonasBa marked this pull request as ready for review April 10, 2026 08:43
@JonasBa JonasBa requested a review from a team as a code owner April 10, 2026 08:43
Copy link
Copy Markdown
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ 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.

Comment thread static/app/components/core/compactSelect/control.tsx
…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();
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

onClear={({overlayState}) => {
if (clearable) {
if (multiple) {
onChange([]);
} else {
onChange(undefined);
}
if (shouldCloseOnSelect?.({...listProps, selectedOptions: []})) {
overlayState?.close();
}
}
}}

Concretely, I’d suggest:

  • add on onEnter callback
  • have the parent decide:
    • if there is only one element in items, invoke onChange. close select if necessary (shouldCloseOnSelect, see onClear. This could be extracted to its own function triggerOnChange.
    • if there are more items, maybe we could have Enter focus the list instead like tab does?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants