ionic-framework: bug: IonSearchbar double clearn buttons

Prequisites

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.

Screenshot from 2021-08-31 10-56-02

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)

Most upvoted comments

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.