Hi @michaschwab, earlier I was not aware there was a built-in cancel and back buttons so I was trying to wrap my own. I cooked up several attempts like so
<ion-buttons end class="SearchBarWrap" *ngIf=SearchOn>
<ion-searchbar (ionInput)="FilterItems($event)" class="SearchBar" ></ion-searchbar>
<button ion-button icon-only (click)="SearchToggle()"><ion-icon name="close"></ion-icon></button>
I have now implemented your improvements above like so
<ion-searchbar (ionInput)="FilterItems($event)" [class.has-content]="!!searchTerm" [(ngModel)]="searchTerm" [showCancelButton]="true"></ion-searchbar>
and paste it your css as is, I get the following:
The X causes the search field to clear (back arrow remains)
The back arrow causes the SearchBar to reset, like so
On Android Messenger (texter), and apparently Twitter, the back-arrow renders outside the SearchBar. Does that mean it requires a custom layout, of a separate button, to achieve a similar look?
Could you please assist me with these questions?
- How can I intercept this built-in back-arrow click event to hide/close the SearchBar.
- What does !!searchTerm mean NotNot operator? is “searchTerm” a built-in thing or something you declare in your component code?
Note: In my use model, I would like the SearchBar to be visible by default on this page (subject to user options) so I provide a separate (conditional) magnifier button for showing the SearchBar if it were to be closed.