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

[jonathan-chin]

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

[jonathan-chin]

it’s proprietary code. let me see if I can run a blank react-redux-firebase project and reproduce the issue with that.