fix(searchbar): emit input event to searchbar which now triggers the input on clear

closes #666

ionic/components/searchbar/searchbar.ts

@@ -32,6 +32,7 @@ import {Button} from '../button/button';
     'cancelButtonText',
     'placeholder'
   ],
+  outputs: ['input'],
   host: {
    '[class.searchbar-left-aligned]': 'shouldLeftAlign',
    '[class.searchbar-focused]': 'isFocused',
@@ -60,6 +61,8 @@ export class Searchbar extends Ion {
     this.renderer = renderer;
     this.elementRef = elementRef;
 
+    this.input = new EventEmitter('input');
+
     // If there is no control then we shouldn't do anything
     if (!ngControl) return;
 
@@ -134,10 +137,11 @@ export class Searchbar extends Ion {
 
     /**
     * @private
-    * Clears the input field and triggers the control change.
+    * Updates the value of query
     */
    updateQuery(value) {
      this.query = value;
+     this.input.next(value);
    }
 }
 
@@ -150,8 +154,6 @@ export class Searchbar extends Ion {
   }
 })
 export class SearchbarInput {
-  @Output() input: EventEmitter<any> = new EventEmitter();
-
   constructor(
     @Host() searchbar: Searchbar,
     elementRef: ElementRef,
@@ -170,10 +172,6 @@ export class SearchbarInput {
     this.ngControl.valueAccessor = this;
   }
 
-  ngOnInit() {
-
-  }
-
   /**
    * @private
    * Write a new value to the element.
@@ -209,14 +207,21 @@ export class SearchbarInput {
     this.searchbar.inputFocused();
   }
 
+  /**
+   * @private
+   * Calls the Searchbar function to blur
+   */
   inputBlurred() {
     this.searchbar.inputBlurred();
   }
 
+  /**
+   * @private
+   * Update the Searchbar input value
+   */
   inputChanged(event) {
     this.writeValue(event.target.value);
     this.onChange(event.target.value);
-    this.input.emit(null);
   }
 
 }

ionic/components/searchbar/test/floating/index.ts

@@ -25,11 +25,11 @@ class E2EApp {
     this.clickedCustomAction = true;
   }
 
-  triggerInput() {
+  triggerInput(ev) {
     // The defaultSearch doesn't get updated before this function is called
     // so we have to wrap it in a timeout
     setTimeout(() => {
-      console.log(this.defaultSearch);
+      console.log("Triggered input", this.defaultSearch);
     });
   }
 }

ionic/components/searchbar/test/floating/main.html

@@ -1,6 +1,6 @@
 <ion-content>
   <h5 padding-left padding-top> Search - Default </h5>
-  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput()" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
       Default Search: <b>{{ defaultSearch }}</b>