From ecf93023f3a41e8922508dfcc17aeace77bc1aa8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 8 Apr 2016 17:46:34 -0400
Subject: [PATCH] fix(searchbar): only show clear icon when focused on the
 searchbar

closes #5922
---
 ionic/components/searchbar/searchbar.scss | 6 ++++++
 ionic/components/searchbar/searchbar.ts   | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/ionic/components/searchbar/searchbar.scss b/ionic/components/searchbar/searchbar.scss
index cd041e930c9..fa98a108380 100644
--- 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
index c81705ce8c1..403c02c5744 100644
--- 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]