fix(apollo-wind): suppress native search clear button to avoid duplicate#972
Conversation
…ate in Search The Search component sets type="search" on the input, so Chromium/WebKit renders a native ::-webkit-search-cancel-button in addition to the component's own InputGroupButton clear control — two clear buttons whenever the field has a value. Hide the native pseudo-elements so only the styled button shows, while keeping type="search" semantics.
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
This PR fixes a UI duplication issue in apollo-wind’s <Search> component where Chromium/WebKit browsers can render a native search cancel button in addition to the component’s styled clear button. The fix keeps type="search" semantics while suppressing the native ::-webkit-search-* decorations via Tailwind selector utilities.
Changes:
- Compose
classNamewithcn()to add WebKit-only suppression for::-webkit-search-cancel-buttonand::-webkit-search-decoration. - Preserve existing
<Search>clear button behavior while preventing duplicate clear controls in supported browsers.
…n classes Regression guard so a future refactor can't drop the ::-webkit-search-cancel-button / ::-webkit-search-decoration suppression and reintroduce the duplicate clear button.
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Summary
<Search>renders two clear buttons whenever the field has a value: the small native one and the component's own styled one.Root cause: the component sets
type="search"on the innerInputGroupInput, so Chromium/WebKit (Chrome, Edge, Safari — and therefore any Chromium webview) automatically renders a native::-webkit-search-cancel-button. The component also renders its own clear control (InputGroupButtonwith<X/>, gated onshowClearButton && value, default on). Nothing suppresses the native pseudo-element, so both appear.Before
After
Notes
onClear,showClearButton, andonChangeall work as before.biome checkpasses on the changed file (lint + format clean).Testing
biome checkclean on the changed file<Search>in a Chromium browser → exactly one (styled) clear button