From 2debff18530cc1dfe6d9d73f7fce7b5a42685f34 Mon Sep 17 00:00:00 2001
From: jbavari <josh@drifty.com>
Date: Mon, 12 Oct 2015 16:23:31 -0600
Subject: [PATCH] Fix(search-bar): Update search model to bind its query value
 to the textbox via two way data binding. On input text change or the clear
 button, call writeValue explicitly. Update demo to show this, also do not
 pass in undefined values

---
 ionic/components/search-bar/search-bar.ts     | 28 ++++++++-----------
 .../search-bar/test/floating/index.ts         | 12 ++++----
 .../search-bar/test/model/main.html           |  4 +--
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts
index 35b4f80451..20f2880e28 100644
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -16,10 +16,6 @@ import {ConfigComponent} from '../../config/decorators';
  */
 @ConfigComponent({
   selector: 'ion-search-bar',
-  inputs: [
-    'list',
-    'model: ngModel'
-  ],
   defaultInputs: {
     'showCancel': false,
     'cancelText': 'Cancel',
@@ -32,15 +28,16 @@ import {ConfigComponent} from '../../config/decorators';
   template:
     '<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">' +
       '<div class="search-bar-search-icon"></div>' +
-      '<input (focus)="inputFocused()" (blur)="inputBlurred()" ' +
-      '(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="model">' +
-      '<button clear *ng-if="model" class="search-bar-close-icon" (click)="clearInput($event)"></button>' +
+      '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
+      '(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">' +
+      '<button clear *ng-if="query" class="search-bar-close-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
     '<button *ng-if="showCancel" (click)="cancelAction($event, model)" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass]
 })
 
 export class SearchBar extends Ion {
+  query: string;
   /**
    * TODO
    * @param {ElementRef} elementRef  TODO
@@ -61,10 +58,7 @@ export class SearchBar extends Ion {
     }
 
     this.ngControl = ngControl;
-
-    ngControl.valueAccessor = this;
-
-    this.query = '';
+    this.ngControl.valueAccessor = this;
   }
 
   // Add the margin for iOS
@@ -77,7 +71,8 @@ export class SearchBar extends Ion {
     }
 
     // If the user passes in a value to the model we should left align
-    this.shouldLeftAlign = this.model && this.model.trim() != '';
+    this.shouldLeftAlign = this.ngControl && this.ngControl.value.trim() != '';
+    this.query = this.ngControl.value;
   }
 
   /**
@@ -85,7 +80,7 @@ export class SearchBar extends Ion {
    * ControlDirective to update the value internally.
    */
   writeValue(value) {
-    this.model = value;
+    this.query = value;
   }
 
   registerOnChange(fn) {
@@ -97,6 +92,7 @@ export class SearchBar extends Ion {
   }
 
   inputChanged(event) {
+    this.writeValue(event.target.value);
     this.onChange(event.target.value);
   }
 
@@ -111,7 +107,7 @@ export class SearchBar extends Ion {
 
   inputBlurred() {
     this.isFocused = false;
-    this.shouldLeftAlign = this.model && this.model.trim() != '';
+    this.shouldLeftAlign = this.ngControl && this.ngControl.value.trim() != '';
 
     if (this.cancelButton) {
       this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
@@ -119,8 +115,8 @@ export class SearchBar extends Ion {
   }
 
   clearInput(event) {
-    this.model = '';
-    this.onChange(this.model);
+    this.writeValue('');
+    this.onChange('');
   }
 }
 
diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts
index d76585b913..a6b40c8328 100644
--- a/ionic/components/search-bar/test/floating/index.ts
+++ b/ionic/components/search-bar/test/floating/index.ts
@@ -8,12 +8,12 @@ import {SearchPipe} from 'ionic/components/search-bar/search-bar';
   directives: [FORM_DIRECTIVES]
 })
 class IonicApp {
-  defaultSearch: string;
-  customPlaceholder: string;
-  defaultCancel: string;
-  customCancel: string;
-  customCancelLong: string;
-  customCancelAction: string;
+  defaultSearch: string = '';
+  customPlaceholder: string = '';
+  defaultCancel: string = '';
+  customCancel: string = '';
+  customCancelLong: string = '';
+  customCancelAction: string = '';
   clickedCustomAction: boolean = false;
 
   constructor() {
diff --git a/ionic/components/search-bar/test/model/main.html b/ionic/components/search-bar/test/model/main.html
index dd76b512a2..9e2242416d 100644
--- a/ionic/components/search-bar/test/model/main.html
+++ b/ionic/components/search-bar/test/model/main.html
@@ -2,7 +2,7 @@
 <!-- <ion-view nav-title="Search Bar"> -->
 
   <ion-content>
-    <form [ng-form-model]="form">
+    <!-- <form [ng-form-model]="form"> -->
 
       <ion-search-bar [(ng-model)]="searchQuery"></ion-search-bar>
       <ion-list inset #list>
@@ -10,7 +10,7 @@
           {{item.title}}
         </ion-item>
       </ion-list>
-    </form>
+    <!-- </form> -->
   </ion-content>
 
 <!-- </ion-view> -->