Close search bar in Angular or Ionic 5 when hitting cancel button

How can we close the search bar if we hit the cancel button? Or maybe better: when you hit any area outside the search bar?

   <ion-searchbar
            *ngIf="toggled"
            placeholder="Search"
            inputmode="text" type="text"
            [(ngModel)]="searchTerm" mode="ios"
            (ionChange)="onSearchChange($event)"
            (ionCancel)="showDefaultBar()"
            (ionBlur)="showDefaultBar()"
            showCancelButton="always"
            [debounce]="250"
            animated="true">
</ion-searchbar>

You can see that the cancel button is always being shown. The problem is that when you hit cancel, it only clears the text input field and does not actually cancel the searchbar. I would like to make sure the searchbar is closed after hitting cancel, like on native iOS .

Is there a way to do this? Couldn’t find anything in the Ionic documents.

2 posts - 2 participants

Read full topic