From 4d47aa237ef73a00dd35e8dcda0272f6fd595fe6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 7 Oct 2015 12:59:35 -0400
Subject: [PATCH] feat(search-bar): Added input blur on the cancelAction
 function and some awful animation to the cancel button

references #247
---
 ionic/components/search-bar/modes/ios.scss  | 12 +++++++-----
 ionic/components/search-bar/search-bar.scss |  4 +++-
 ionic/components/search-bar/search-bar.ts   |  5 ++++-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index c9de313a5d..92d1b2e7a8 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -80,20 +80,22 @@ $search-bar-ios-input-close-icon-size:    17px !default;
 .search-bar-input-container.left-align {
   .search-bar-search-icon {
     margin-left: 0;
-    transition: $search-bar-ios-input-transition;
   }
   .search-bar-input {
     padding-left: 28px;
-    transition: $search-bar-ios-input-transition;
   }
 }
 
-.search-bar-cancel.left-align {
+.search-bar-cancel {
   @extend button[clear];
-  display: block;
   padding-left: 8px;
   padding-right: 0;
-  min-height: 0;
+  transition: $search-bar-ios-input-transition;
+}
+
+.search-bar-cancel.left-align {
+  margin-right: 0;
+  visibility: visible;
 }
 
 &.hairlines .search-bar {
diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss
index 7bff42fe48..d03d43bcb3 100644
--- a/ionic/components/search-bar/search-bar.scss
+++ b/ionic/components/search-bar/search-bar.scss
@@ -33,5 +33,7 @@ input[type="search"].search-bar-input {
 }
 
 .search-bar-cancel {
-  display: none;
+  visibility: hidden;
+  margin-right: -200px;
+  min-height: 0;
 }
diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts
index 78de425796..022e98b82a 100644
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -27,10 +27,13 @@ import {IonicComponent, IonicView} from '../../config/decorators';
     'cancelText': 'Cancel',
     'placeholder': 'Search',
     'cancelAction': function() {
+      // TODO user will override this if they pass a function
+      // need to allow user to call these
       console.log('Default Cancel');
       this.isFocused = false;
       this.shouldLeftAlign = this.value.trim() != '';
-      // TODO input blur      
+      this.element = this.elementRef.nativeElement.querySelector('input');
+      this.element.blur();
     }
   }
 })