feat(selector): built-in search magnifier + clear button in dropdown search - #4636
Merged
Conversation
freddymeta
requested review from
cixzhang,
ejhammond and
imdreamrunner
as code owners
August 1, 2026 14:21
meta-cla
Bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
community
github-actions
Bot
requested review from
cvkxx,
ernestt,
kentonquatman and
rubyycheung
August 1, 2026 14:22
…search The searchable dropdown (Selector & MultiSelector) now has two built-in search affordances rather than opt-in props: - A leading magnifier icon, rendered whenever `hasSearch` is on. It is decorative (aria-hidden) and sits outside the combobox contract. - A trailing clear (✕) button, rendered once a query is typed. Clicking it resets the query and returns focus to the input. It is a sibling of the input, not part of the combobox — the input remains the combobox and keeps its role/aria/keydown navigation. Both are on by default (standard search-field affordances) with no config knob. Themeable via selector-search-icon / selector-search-clear-icon and the multi-selector equivalents. Non-breaking, but note the magnifier is a new default glyph on existing hasSearch usages.
freddymeta
force-pushed
the
feat/selector-search-affordances
branch
from
August 1, 2026 14:24
ef77d17 to
03d2f60
Compare
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR Modified ComponentsMultiSelector (@astryxdesign/core) · View in Storybook
Selector (@astryxdesign/core) · View in Storybook
Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
…asClear) The dropdown search field was a bespoke flex row — a raw <input role=combobox> with a magnifier Icon and a clear <button> as siblings, plus ~55 lines of duplicated input styling and two new theme targets. Replace it with a TextInput: the magnifier is its startIcon (now inside the field) and the clear (X) is its built-in hasClear (reset + refocus). role and aria-* pass through to the underlying <input> via BaseProps, so the combobox contract is unchanged. Removes the bespoke input/magnifier/clear markup, the searchIcon/searchInput/ searchClearButton styles, handleSearchClear, the *-search-icon / *-search-clear-icon theme targets, and the now-unused clearSearch i18n keys. The search field now matches every other Astryx input (border, focus ring, sizing).
- width=100% so the search TextInput fills the dropdown (was sized to content, leaving a gap at the end). - Forward-Tab from the search input no longer dismisses the popup when a query is showing the clear (X) button; instead focus moves to that button so it is keyboard-reachable. Tabbing off the button (or Tab with no query) dismisses as before. Shift+Tab returns to the input natively.
… tests Apply the same width=100% flush and Tab-to-clear-button behavior to MultiSelector's dropdown search, and cover the new keyboard behavior in both Selector and MultiSelector suites (Tab moves to the clear button when a query is present; Tab with no query dismisses).
cixzhang
approved these changes
Aug 4, 2026
cixzhang
enabled auto-merge (squash)
August 4, 2026 02:29
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The searchable dropdown (Selector & MultiSelector) now renders its dropdown search field as a
TextInputrather than a bespoke control. That gives it two standard search affordances, both inside the field, with no new props or config knob:startIcon, rendered inside the field's leading edge wheneverhasSearchis on. Decorative (aria-hidden), outside the combobox contract.hasClear, rendered inside the trailing edge once a query is typed. Clicking it resets the query and returns focus to the input.The search field now shares TextInput's border, focus ring, and sizing, so it looks and behaves like every other input in the system instead of being a one-off.
How
renderSearch()now returns a<TextInput isLabelHidden startIcon="search" hasClear width="100%" …>instead of a hand-rolled[icon] [input] [clear]flex row.width="100%"makes the field flush to the dropdown edges (the wrapper keeps only the dropdown's inline/block padding).<input>remains the sole combobox:role="combobox",aria-expanded,aria-controls,aria-autocomplete, andaria-activedescendantpass through to it viaBaseProps, and arrow/Enter/Escape/PageUp/PageDown navigation is unchanged. The magnifier is decorative; the clear button is TextInput-internal — neither is part of the combobox contract.Tabfrom the search input dismissed the popup, so the clear ✕ (a later tab stop inside the popup) was unreachable by keyboard. Now, when a query is showing the clear button, forward-Tabmoves focus to it and keeps the popup open; tabbing off the button (orTabwith no query) dismisses as before.Shift+Tabreturns to the input natively.Theming
No new theme targets. The search field is a
TextInput, so it is themeable through the standardtext-inputtarget (size/status aware); the magnifier and clear glyph areIcons and inheritIcontheming. This removes the previously-proposed*-search-icon/*-search-clear-icontargets in favor of composition.Removed
The bespoke
<input>+ magnifier + clear-button markup, thesearchIcon/searchInput/searchClearButtonStyleX blocks, thehandleSearchClearhandler, the*-search-icon/*-search-clear-icontheme targets, and the now-unusedclearSearchi18n keys.Non-breaking, but note the visual default
No API change. The clear button only appears with a typed query. The magnifier defaults on, so existing
hasSearchdropdowns gain a leading glyph inside the field — an intended visual default, flagged in the changeset. The clear button's accessible name is now derived from the field label ("Clear Search options").Testing
hasSearchand isaria-hidden; clear appears on a query, resets + refocuses on click, and is absent when empty; the combobox contract stays on the input.Tabfrom the input reaches the clear button (popup stays open) when a query is present;Tabwith no query dismisses.Selector+MultiSelectorsuites (161 tests) and thethemingTargetssuite (275 tests) pass;typecheckand eslint on the changed files are clean.