From b5f93f95c0b5b0076078adf5f379b7aaa22353d1 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 14 Jun 2016 16:01:33 -0400
Subject: [PATCH] fix(searchbar): add opacity so the searchbar doesn't show
 when it's moved over

---
 src/components/searchbar/searchbar.ios.scss     | 2 ++
 src/components/searchbar/test/toolbar/main.html | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
index df9cce052dc..f5aeb55a3d3 100644
--- a/src/components/searchbar/searchbar.ios.scss
+++ b/src/components/searchbar/searchbar.ios.scss
@@ -129,6 +129,7 @@ ion-searchbar {
   cursor: pointer;
   pointer-events: none;
   display: none;
+  opacity: 0;
 }
 
 .searchbar-show-cancel .searchbar-ios-cancel {
@@ -155,6 +156,7 @@ ion-searchbar {
 .searchbar-has-focus {
   .searchbar-ios-cancel {
     pointer-events: auto;
+    opacity: 1;
   }
 }
 
diff --git a/src/components/searchbar/test/toolbar/main.html b/src/components/searchbar/test/toolbar/main.html
index d036151f66f..7a401042129 100644
--- a/src/components/searchbar/test/toolbar/main.html
+++ b/src/components/searchbar/test/toolbar/main.html
@@ -10,7 +10,7 @@ <h5 padding-left padding-top> Search - Default Toolbar </h5>
 
   <h5 padding-left padding-top> Search - Primary Toolbar </h5>
   <ion-toolbar primary>
-    <ion-searchbar dark [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar dark [(ngModel)]="primaryToolbarSearch" showCancelButton class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Dark Toolbar </h5>
@@ -20,7 +20,7 @@ <h5 padding-left padding-top> Search - Dark Toolbar </h5>
 
   <h5 padding-left padding-top> Search - Light Toolbar </h5>
   <ion-toolbar light>
-    <ion-searchbar [(ngModel)]="lightToolbarSearch" class="e2eLightToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="lightToolbarSearch" showCancelButton class="e2eLightToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
 </ion-content>