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

closes #5922
ionic-team · Apr 8, 2016 · ecf9302 · ecf9302
1 parent 0081408
commit ecf9302
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/ionic/components/searchbar/searchbar.scss b/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;
+}
diff --git a/ionic/components/searchbar/searchbar.ts b/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]