refactor(searchbar): fixed searchbar when undefined value is passed or no ngModel at all, fixed style of cancel button on hover

removed unused broken searchbar tests. references #247

ionic/components/searchbar/searchbar.ios.scss

@@ -186,6 +186,10 @@ ion-searchbar {
   ion-searchbar[#{$color-name}] {
     .searchbar-ios-cancel {
       color: $color-value;
+
+      &:hover:not(.disable-hover) {
+        color: color-shade($color-value);
+      }
     }
   }
 

ionic/components/searchbar/searchbar.ts

@@ -1,10 +1,11 @@
-import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter} from 'angular2/core';
+import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional} from 'angular2/core';
 import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
 import {Icon} from '../icon/icon';
 import {Button} from '../button/button';
+import {isDefined} from '../../util/util';
 
 
 /**
@@ -78,7 +79,7 @@ export class Searchbar extends Ion {
   @Output() clear: EventEmitter<Searchbar> = new EventEmitter();
 
   value: string = '';
-  blurInput = true;
+  blurInput: boolean = true;
 
   @HostBinding('class.searchbar-focused') isFocused;
 
@@ -98,43 +99,16 @@ export class Searchbar extends Ion {
   constructor(
     elementRef: ElementRef,
     config: Config,
-    ngControl: NgControl
+    @Optional() ngControl: NgControl
   ) {
     super(elementRef, config);
 
+    // If the user passed a ngControl we need to set the valueAccessor
     if (ngControl) {
-      this.ngControl = ngControl;
-      this.ngControl.valueAccessor = this;
+      ngControl.valueAccessor = this;
     }
   }
 
-  /**
-   * @private
-   * Write a new value to the element.
-   */
-  public writeValue(value: any) {
-    this.value = value;
-  }
-
-  public onChange = (_:any) => {};
-  public onTouched = () => {};
-
-  /**
-   * @private
-   * Set the function to be called when the control receives a change event.
-   */
-  public registerOnChange(fn:(_:any) => {}):void {
-    this.onChange = fn;
-  }
-
-  /**
-   * @private
-   * Set the function to be called when the control receives a touch event.
-   */
-  public registerOnTouched(fn:() => {}):void {
-    this.onTouched = fn;
-  }
-
   /**
    * @private
    * On Initialization check for attributes
@@ -149,9 +123,25 @@ export class Searchbar extends Ion {
     this.placeholder = this.placeholder || 'Search';
 
     if (this.ngModel) this.value = this.ngModel;
+    this.onChange(this.value);
+
     this.shouldLeftAlign = this.value && this.value.trim() != '';
   }
 
+  /**
+   * @private
+   * After View Initialization check the value
+   */
+  ngAfterViewInit() {
+    // If the user passes an undefined variable to ngModel this will warn
+    // and set the value to an empty string
+    if (!isDefined(this.value)) {
+      console.warn('Searchbar was passed an undefined value in ngModel. Please make sure the variable is defined.');
+      this.value = '';
+      this.onChange(this.value);
+    }
+  }
+
   /**
    * @private
    * Sets the Searchbar to focused and aligned left on input focus.
@@ -202,4 +192,31 @@ export class Searchbar extends Ion {
     this.clearInput();
     this.blurInput = true;
   }
+
+  /**
+   * @private
+   * Write a new value to the element.
+   */
+  public writeValue(value: any) {
+    this.value = value;
+  }
+
+  public onChange = (_:any) => {};
+  public onTouched = () => {};
+
+  /**
+   * @private
+   * Set the function to be called when the control receives a change event.
+   */
+  public registerOnChange(fn:(_:any) => {}):void {
+    this.onChange = fn;
+  }
+
+  /**
+   * @private
+   * Set the function to be called when the control receives a touch event.
+   */
+  public registerOnTouched(fn:() => {}):void {
+    this.onTouched = fn;
+  }
 }

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

@@ -11,8 +11,6 @@ class E2EApp {
   defaultSearch: string = 'test';
   customPlaceholder: string = '';
   defaultCancel: string = '';
-  customCancel: string = '';
-  customCancelAction: string = '';
 
   constructor() {
 

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

@@ -3,15 +3,23 @@
   <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
-      Default Search: <b>{{ defaultSearch }}</b>
+    defaultSearch: <b>{{ defaultSearch }}</b>
   </p>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
-  <ion-searchbar [(ngModel)]="customPlaceholder" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customPlaceholder" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
+
+  <p padding-left>
+    customPlaceholder: <b>{{ customPlaceholder }}</b>
+  </p>
 
   <h5 padding-left> Search - Hide Cancel Button </h5>
-  <ion-searchbar [(ngModel)]="defaultCancel" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultCancel" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+
+  <p padding-left>
+    defaultCancel: <b>{{ defaultCancel }}</b>
+  </p>
 
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
-  <ion-searchbar [(ngModel)]="customCancel" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 </ion-content>

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

@@ -1,43 +0,0 @@
-import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
-
-import {App} from 'ionic/ionic';
-import {SearchPipe} from 'ionic/components/searchbar/searchbar';
-
-
-function randomTitle() {
-  var items = ['Soylent', 'Pizza', 'Pumpkin', 'Apple', 'Bologna', 'Turkey', 'Kabob', 'Salad', 'Fruit bowl', 'Fish Tacos', 'Chimichongas', 'Meatloaf'];
-  return items[Math.floor(Math.random() * items.length)];
-}
-
-@App({
-  templateUrl: 'main.html',
-  providers: [NgControl],
-  directives: [FORM_DIRECTIVES]
-})
-class E2EApp {
-  constructor() {
-    var fb = new FormBuilder();
-
-    this.searchQuery = '';
-
-    this.items = []
-    for(let i = 0; i < 100; i++) {
-      this.items.push({
-        title: randomTitle()
-      })
-    }
-  }
-
-  getItems() {
-    var q = this.searchQuery;
-    if(q.trim() == '') {
-      return this.items;
-    }
-    return this.items.filter((v) => {
-      if(v.title.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
-        return true;
-      }
-      return false;
-    })
-  }
-}

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

@@ -7,6 +7,10 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
   templateUrl: 'main.html'
 })
 class E2EApp {
+  defaultToolbarSearch: string = '';
+  primaryToolbarSearch: string = '';
+  dangerToolbarSearch: string = '';
+  lightToolbarSearch: string = '';
 
   constructor() {