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

@@ -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('');
   }
 }
 

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() {

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> -->