Searchbar showCancelButton on Android RC0

[cacko]

After upgrading to RC0, the searchbar for material design stopped showing the back button on the left, where it was replacing the search icon and triggering (ionCancel). It works fine on iOS, just not working on android.

    <ion-searchbar [hidden]="!searchMode" showCancelButton="true"
                   [(ngModel)]="queryText"
                   (ionInput)="updateSchedule()"
                   (ionCancel)="toggleSearch()"
                   placeholder="Search">
    </ion-searchbar>

IOS:

MD:

As I said it used to work before RC0, showing something like this on MD:

Any ideas ?
Thanks.

[Rafapardal]

The same here.
Any update about this?

[cacko]

nah, I just hacked it

.searchbar-md .searchbar-search-icon {
display: none !important;
}
.searchbar-md .searchbar-md-cancel {
display: block !important;
}

[Rafapardal]

Thanks, i will test it

[michaschwab]

@cacko

.searchbar-md .searchbar-search-icon { display: none !important;}.searchbar-md .searchbar-md-cancel { display: block !important;}

Thanks, this works. I edited it slightly so that the back button is only visible when the search box has content. Maybe this is of use to somebody:

<ion-searchbar [class.has-content]="!!searchTerm" [(ngModel)]="searchTerm" [showCancelButton]="true"></ion-searchbar>

.searchbar-md.has-content .searchbar-search-icon {
  display: none !important;
}
.searchbar-md.has-content .searchbar-md-cancel {
  display: block !important;
}

[AlGantori]

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>
</ion-buttons>

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?

1. How can I intercept this built-in back-arrow click event to hide/close the SearchBar.
2. 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.

Thank you.

[michaschwab]

@AlGantori

How can I intercept this built-in back-arrow click event to hide/close the SearchBar.

I’m not sure, sorry. But I would guess it’s possible to achieve this with some CSS, e.g.

.searchbar-md-cancel {
  position: relative;
  left: -50px;
}

and similarly moving the search field to the right to make space for the cancel icon.

@AlGantori

What does !!searchTerm mean NotNot operator?

It’s just double negation to turn searchTerm (a string) into a boolean value. If it’s empty, it’s false, and if it’s not empty, it’s true.

@AlGantori

is “searchTerm” a built-in thing or something you declare in your component code?

It’s the model value of my search box. You can see that in my post because it is introduced at <ion-searchbar [(ngModel)]="searchTerm"></ion-searchbar> .

Hope it helps!

[AlGantori]

Thanks, I learned something new about JS/TS that negating a string turns it into a boolean. I never done anything similar in C# or even in VB (it’s probably possible)

I was not clear about the first part of your answer. You think it would be possible to intercept the built-in back-arrow click event via CSS ?

Regarding the css you provided I dropped as is and it only causes the show searchbar to left flush (dock) the back-arrow is still inside the rectangular frame of the searchbar/field. I will into the chrome console and try to see if I can decipher what’s happening.

Last, I am used to setting ngModel to a member of the component class and often directly a member of a service injected in the component in order to create a binding. However, in your case I know I do not have searchTerm defined in the code behind. So I am puzzled where/how it is causing it to refer to the search field content. So how is the value of searchTerm acquired if it is not built-in in ionic/angular?

For filtering in my case I am getting the search field content via $event.target.value according to the docs.

I understand [class.has-content]="!!searchTerm" to mean assign style class .has-content if the field is not empty. I assume .has-content is something you defined or perhaps that’s an ionic style?

<ion-searchbar (ionInput)="FilterItems($event)" [class.has-content]="!!searchTerm" [(ngModel)]="searchTerm" [showCancelButton]="true"></ion-searchbar>

I appreciate very much your assistance, Thank You.

[AlGantori]

I discovered that the api doc mentions how to intercept the "cancel button"
basically via

 (ionCancel)="OnCancel($event)"

BTW, it’s kind of misleading that they use an X icon for clear instead of some other kind of symbol like an eraser because first I was thinking that X meant the cancel button not the back-arrow

[Technbuzz]

If for some reason you need to always show the cancel button in iOS than add following CSS

.searchbar-ios .searchbar-ios-cancel{
    display: block ;
    padding-left: 8px !important;
} 

[Kyrax80]

@Technbuzz

.searchbar-ios .searchbar-ios-cancel{ display: block ; padding-left: 8px !important; }

Hello, I want the butttons to show on Android but its not showing with your solution, could you help me?