Ion 2 ion-search panel ionClear does not work when a button is pressed

Question

I have a search bar in my toolbar as follows:

  <ion-toolbar color="clarity">
    <ion-searchbar
      [(ngModel)]="searchText"
      [showCancelButton]="false"
      (ionInput)="onInput($event)"
      (ionClear)="onClear($event)">
    </ion-searchbar>
  </ion-toolbar>   

and the function in the corresponding TS file:

   onClear(event){
     this.searchText = "";
   }

But the 'onClear' event never fires when search bars are clicked with a small click on x. Why is this?

Answer 1

After @ Ivario18 suggested changing the transparency to (ionCancel), I added (ionCancel) as well as (ionClear):

<ion-toolbar color="clarity">
  <ion-searchbar
    [(ngModel)]="searchText"
    [showCancelButton]="false"
    (ionInput)="onInput($event)"
    (ionClear)="onClear($event)"
    (ionCancel)="onCancel($event)">
  </ion-searchbar>
</ion-toolbar>   

Now the kernel is working ...

Answer 2

Change it to (ionCancel)Maybe you are using an obsolete ionic conductor.

Answer 3

, (ionCancel), [showCancelButton] = "true". , (ionClear), , .