ionic-framework: bug: IonSearchbar double clearn buttons
Prequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- v4.x
- v5.x
- v6.x
Current Behavior
when using IonSearchbar in react, two clear buttons show up when viewing on Crhome.

both buttons are functional. it seems to have been reported before in #20083 but was closed due to being stale.
Expected Behavior
only one close button should be shown
Steps to Reproduce
import {
IonSearchbar
} from '@ionic/react';
export default function TagPicker(){
return (
<>
<IonSearchbar
onIonChange={(event) => {console.log(event.detail.value);}}
debounce={1000}
/>
tag picker
</>
);
}
Code Reproduction URL
No response
Ionic Info
Ionic:
Ionic CLI : 6.17.0
Utility:
cordova-res : 0.15.3
native-run : not installed globally
System:
NodeJS : v14.15.4
npm : 6.14.10
OS : Linux 5.11
Additional Information
No response
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 16 (7 by maintainers)
thanks. yes I think that fixes it. I think what happened was I started with a blank starter and just trashed the App.tsx, partially because we’re not using typescript
it’s proprietary code. let me see if I can run a blank react-redux-firebase project and reproduce the issue with that.