fix(searchbar): position elements when the value changes not after content checked

Author: brandyscarney

src/components/searchbar/searchbar.ts

@@ -192,14 +192,6 @@ export class Searchbar {
     this.positionElements();
   }
 
-  /**
-   * @private
-   * After Content is checked position the elements
-   */
-  ngAfterContentChecked() {
-    this.positionElements();
-  }
-
   /**
    * @private
    * Positions the input search icon, placeholder, and the cancel button
@@ -352,6 +344,7 @@ export class Searchbar {
    */
   writeValue(val: any) {
     this._value = val;
+    this.positionElements();
   }
 
   /**

src/components/searchbar/test/nav/detail.html

@@ -0,0 +1,7 @@
+<ion-navbar *navbar>
+  <ion-title>Detail</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <h1>City: {{city}}</h1>
+</ion-content>

src/components/searchbar/test/nav/e2e.ts

@@ -1,4 +1,4 @@
 
-it('should navigate to searchbar', function() {
-  element(by.css('.e2eSearchbarNav')).click();
+it('should navigate to details', function() {
+  element(by.css('.e2eSearchbarNavItem')).click();
 });

src/components/searchbar/test/nav/index.ts

@@ -1,31 +1,32 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap, NavController} from '../../../../../src';
+import { Component } from '@angular/core';
+import { ionicBootstrap, NavController, NavParams } from '../../../../../src';
 
 
 @Component({
-  templateUrl: 'first.html'
+  templateUrl: 'main.html'
 })
-class FirstPage {
-  constructor(private _nav: NavController) {
-
-  }
+class MainPage {
+  constructor(private _nav: NavController) { }
 
   goToSecond() {
-    this._nav.push(SecondPage);
+    this._nav.push(SearchPage);
   }
 }
 
 @Component({
-  templateUrl: 'second.html'
+  templateUrl: 'search.html'
 })
-class SecondPage {
-  searchQuery = '';
+class SearchPage {
   items: string[];
 
-  constructor() {
+  constructor(private _nav: NavController) {
     this.initializeItems();
   }
 
+  showDetail(item: any) {
+    this._nav.push(DetailPage, {city: item});
+  }
+
   initializeItems() {
     this.items = [
       'Amsterdam',
@@ -68,15 +69,15 @@ class SecondPage {
     ];
   }
 
-  getItems(searchbar) {
+  getItems(ev: any) {
     // Reset items back to all of the items
     this.initializeItems();
 
     // set q to the value of the searchbar
-    var q = searchbar.value;
+    var q = ev.target.value;
 
     // if the value is an empty string don't filter the items
-    if (q.trim() == '') {
+    if (!q || q.trim() === '') {
       return;
     }
 
@@ -89,11 +90,30 @@ class SecondPage {
   }
 }
 
+@Component({
+  templateUrl: 'detail.html'
+})
+class DetailPage {
+  city: string;
+
+  constructor(private _navParams: NavParams) {
+    this.city = _navParams.get('city');
+  }
+}
+
+@Component({
+  templateUrl: 'tabs.html'
+})
+class TabsPage {
+  mainPage = MainPage;
+  searchPage = SearchPage;
+}
+
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  root = FirstPage;
+  root = TabsPage;
 }
 
 ionicBootstrap(E2EApp);

src/components/searchbar/test/nav/first.html renamed to src/components/searchbar/test/nav/main.html

@@ -3,5 +3,5 @@
 </ion-navbar>
 
 <ion-content padding>
-  <button block (click)="goToSecond()" class="e2eSearchbarNav">Go to Searchbar Page</button>
+  <button block (click)="goToSecond()">Go to Searchbar Page</button>
 </ion-content>

src/components/searchbar/test/nav/search.html

@@ -0,0 +1,17 @@
+<ion-navbar *navbar>
+  <ion-title>Searchbar</ion-title>
+</ion-navbar>
+
+<ion-toolbar>
+  <ion-searchbar primary (ionInput)="getItems($event)" placeholder="Filter Schedules">
+  </ion-searchbar>
+</ion-toolbar>
+
+<ion-content>
+  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
+  <ion-list>
+    <button ion-item *ngFor="let item of items" (click)="showDetail(item)" class="e2eSearchbarNavItem">
+      {{ item }}
+    </button>
+  </ion-list>
+</ion-content>

src/components/searchbar/test/nav/second.html

@@ -0,0 +1,4 @@
+<ion-tabs #content>
+  <ion-tab tabTitle="Schedule" tabIcon="star" [root]="searchPage"></ion-tab>
+  <ion-tab tabTitle="Navigate" tabIcon="globe" [root]="mainPage"></ion-tab>
+</ion-tabs>