CODEWITHSUNDEEP
ionic-frameworkionic2
user4079725
user4079725

Reputation:

Ionic 2 ion-Searchbar ionClear not firing on button click

I have a searchbar 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 a function in the corresponding TS file: 

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

But the 'onClear' event never gets hit when the searchbars little 'x' is clicked.. why is that?

Upvotes: 5

Views: 4707

Answers (3)

ajones0519
ajones0519

Reputation: 11

I found that I was able to use just the (ionCancel) if I include the [showCancelButton]="true". Without it, the cancel didn't work at all, and the (ionClear) seemed to be breaking my infinite-scroll directive.

Upvotes: 1

user4079725
user4079725

Reputation:

After @Ivario18 suggested I change the clear to (ionCancel), I added the (ionCancel) as well as the (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 clear is working...

Upvotes: 1

Ivar Reukers
Ivar Reukers

Reputation: 7719

Change it to (ionCancel) You're probably using an outdated ionic guide

Upvotes: 2

Related Questions