fix(searchbar): animated + no cancel works as expected

fixes #8903
ionic-team · Nov 30, 2016 · 851187a · 851187a
1 parent ccb6bf1
commit 851187a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
@@ -210,6 +210,9 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 // Searchbar animation
 // -----------------------------------------
 
+.searchbar-ios.searchbar-animated.searchbar-show-cancel .searchbar-ios-cancel {
+  display: block;
+}
 .searchbar-ios.searchbar-animated .searchbar-search-icon,
 .searchbar-ios.searchbar-animated .searchbar-input {
   transition: $searchbar-ios-input-transition;
@@ -222,8 +225,6 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 }
 
 .searchbar-animated .searchbar-ios-cancel {
-  display: block;
-
   margin-right: -100%;
 
   opacity: 0;

diff --git a/src/components/searchbar/test/basic/main.html b/src/components/searchbar/test/basic/main.html
@@ -38,6 +38,9 @@ <h5 padding-left> Search - Mode MD</h5>
   <h5 padding-left> Search - Mode WP</h5>
   <ion-searchbar mode="wp" animated="true" showCancelButton placeholder="Search"></ion-searchbar>
 
+  <h5 padding-left> Search - Animated and No Cancel</h5>
+  <ion-searchbar [placeholder]="'Search'" [animated]="true" [showCancelButton]="false"></ion-searchbar>
+
   <p padding>
     <button ion-button block (click)="changeValue()">Change Value</button>
   </p>