fix(searchbar): only show clear icon when focused on the searchbar

closes #5922

Author: brandyscarney

ionic/components/searchbar/searchbar.scss

@@ -38,8 +38,14 @@ ion-searchbar {
 }
 
 .searchbar-clear-icon {
+  display: none;
+
   margin: 0;
   padding: 0;
 
   min-height: 0;
 }
+
+.searchbar-has-value.searchbar-focused .searchbar-clear-icon {
+  display: block;
+}

ionic/components/searchbar/searchbar.ts

@@ -61,7 +61,7 @@ export class SearchbarInput {
       '</button>' +
       '<div class="searchbar-search-icon"></div>' +
       '<input [value]="value" (input)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">' +
-      '<button clear *ngIf="value" class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
+      '<button clear class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
     '</div>' +
     '<button clear (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]