Merge branch 'searchbar-fix'

2026-03-13 10:22:08 +08:00 · 2015-12-12 15:31:38 -05:00
parent 9c0bcecc8e 227be2c874
commit f7195184df
6 changed files with 159 additions and 81 deletions
--- a/ionic/components/searchbar/searchbar.ios.scss
+++ b/ionic/components/searchbar/searchbar.ios.scss
@@ -121,6 +121,12 @@ ion-searchbar {
  .searchbar-input {
    padding-left: 30px;
  }
+}
+
+// Searchbar Focused
+// -----------------------------------------
+
+.searchbar-focused {
  .searchbar-ios-cancel {
    transform: translateX(0);
    flex: 0 0 auto;
@@ -129,7 +135,6 @@ ion-searchbar {
  }
 }

-
 // Searchbar in Toolbar
 // -----------------------------------------

@@ -148,7 +153,7 @@ ion-searchbar {
    }
  }

-  .searchbar-left-aligned .searchbar-ios-cancel {
+  .searchbar-focused .searchbar-ios-cancel {
    padding-left: 8px;
  }

--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -1,4 +1,4 @@
-import {ElementRef, Renderer} from 'angular2/core';
+import {ElementRef, Renderer, Directive, Host, forwardRef, ViewChild, Output, EventEmitter} from 'angular2/core';
 import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common';

 import {Ion} from '../ion';
@@ -18,20 +18,21 @@ import {Button} from '../button/button';
 * <ion-searchbar [(ngModel)]="defaultSearch"></ion-searchbar>
 * ```
 *
- * @property [placeholder] - sets input placeholder to value passed in
- * @property [showCancel] - shows the cancel button based on boolean value passed in
- * @property [cancelText] - sets the cancel button text to the value passed in
+ * @property [placeholder] - (default: 'Search') Sets input placeholder to value passed in
+ * @property [hideCancelButton] - (default: false) Hides the cancel button
+ * @property [cancelButtonText] - (default: 'Cancel') sets the cancel button text to the value passed in
 * @property [cancelAction] - the function that gets called by clicking the cancel button
 * @see {@link /docs/v2/components#search Search Component Docs}
 */
@ConfigComponent({
  selector: 'ion-searchbar',
-  defaultInputs: {
-    'showCancel': false,
-    'cancelText': 'Cancel',
-    'placeholder': 'Search'
-  },
-  inputs: ['cancelAction'],
+  inputs: [
+    'cancelAction',
+    'hideCancelButton',
+    'cancelButtonText',
+    'placeholder'
+  ],
+  outputs: ['input'],
  host: {
   '[class.searchbar-left-aligned]': 'shouldLeftAlign',
   '[class.searchbar-focused]': 'isFocused',
@@ -40,18 +41,14 @@ import {Button} from '../button/button';
    '<div class="searchbar-input-container">' +
      '<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel"><icon arrow-back></icon></button>' +
      '<div class="searchbar-search-icon"></div>' +
-      '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
-      '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
-      '<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput($event)"></button>' +
+      '<input [value]="query" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
+      '<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput()"></button>' +
    '</div>' +
-    '<button clear *ngIf="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
-  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button]
+    '<button clear (click)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
+  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)]
 })
 export class Searchbar extends Ion {
-  /**
-   * @private
-   * This holds the searchbar input value used for querying
-   */
+  @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput;
  query: string;

  constructor(
@@ -64,22 +61,115 @@ 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;

    this.ngControl = ngControl;
    this.ngControl.valueAccessor = this;
+
+    this.query = '';
+  }
+
+  /**
+   * @private
+   * On Initialization check for attributes
+   */
+  ngOnInit() {
+    let hideCancelButton = this.hideCancelButton;
+    if (typeof hideCancelButton === 'string') {
+      this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true');
+    }
+
+    this.cancelButtonText = this.cancelButtonText || 'Cancel';
+    this.placeholder = this.placeholder || 'Search';
  }

  /**
   * @private
   * After the view has initialized check if the searchbar has a value
-   * and then store that value in query
   */
  ngAfterViewInit() {
-    // If the user passes in a value to the model we should left align
-    this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
-    this.query = this.ngControl.value || '';
+    this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
+  }
+
+  /**
+   * @private
+   * Sets the searchbar to focused and aligned left on input focus.
+   */
+  inputFocused() {
+    this.isFocused = true;
+    this.shouldLeftAlign = true;
+  }
+
+  /**
+   * @private
+   * Sets the searchbar to not focused and checks if it should align left
+   * based on whether there is a value in the searchbar or not on input blur.
+   */
+  inputBlurred() {
+    this.isFocused = false;
+    this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
+  }
+
+  /**
+   * @private
+   * Clears the input field and triggers the control change.
+   */
+  clearInput() {
+    this.searchbarInput.writeValue('');
+    this.searchbarInput.onChange('');
+  }
+
+  /**
+   * @private
+   * Blurs the input field, clears the input field and removes the left align
+   * then calls the custom cancel function if the user passed one in.
+   */
+  cancelSearchbar(event, value) {
+    this.searchbarInput.elementRef.nativeElement.blur();
+    this.clearInput();
+    this.shouldLeftAlign = false;
+
+    this.cancelAction && this.cancelAction(event, value);
+  }
+
+    /**
+    * @private
+    * Updates the value of query
+    */
+   updateQuery(value) {
+     this.query = value;
+     this.input.next(value);
+   }
+}
+
+@Directive({
+  selector: '.searchbar-input',
+  host: {
+    '(focus)': 'inputFocused()',
+    '(blur)': 'inputBlurred()',
+    '(keyup)': 'inputChanged($event)'
+  }
+})
+export class SearchbarInput {
+  constructor(
+    @Host() searchbar: Searchbar,
+    elementRef: ElementRef,
+    renderer: Renderer
+  ) {
+    this.searchbar = searchbar;
+    this.renderer = renderer;
+    this.elementRef = elementRef;
+
+    if (!searchbar.ngControl) return;
+
+    this.onChange = (_) => {};
+    this.onTouched = (_) => {};
+
+    this.ngControl = searchbar.ngControl;
+    this.ngControl.valueAccessor = this;
  }

  /**
@@ -87,7 +177,10 @@ export class Searchbar extends Ion {
   * Write a new value to the element.
   */
  writeValue(value) {
-    this.query = value;
+    this.value = value;
+    if (typeof value === 'string') {
+      this.searchbar.updateQuery(value);
+    }
  }

  /**
@@ -108,52 +201,27 @@ export class Searchbar extends Ion {

  /**
   * @private
-   * Updates the value of the control when the searchbar input changes.
+   * Sets the Searchbar input to focused and aligned left on input focus.
+   */
+  inputFocused() {
+    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);
  }

-  /**
-   * @private
-   * Sets the searchbar to focused and aligned left on input focus.
-   */
-  inputFocused() {
-    this.isFocused = true;
-    this.shouldLeftAlign = true;
-  }
-
-  /**
-   * @private
-   * Sets the searchbar to not focused and checks if it should align left
-   * based on whether there is a value in the searchbar or not on input blur.
-   */
-  inputBlurred() {
-    this.isFocused = false;
-    this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
-  }
-
-  /**
-   * @private
-   * Clears the input field and triggers the control change.
-   */
-  clearInput(event) {
-    this.writeValue('');
-    this.onChange('');
-  }
-
-  /**
-   * @private
-   * Blurs the input field, clears the input field and removes the left align
-   * then calls the custom cancel function if the user passed one in.
-   */
-  cancelSearchbar(event, query) {
-    this.element = this.elementRef.nativeElement.querySelector('input');
-    this.element.blur();
-    this.clearInput();
-    this.shouldLeftAlign = false;
-
-    this.cancelAction && this.cancelAction(event, query);
-  }
 }
--- a/ionic/components/searchbar/test/floating/index.ts
+++ b/ionic/components/searchbar/test/floating/index.ts
@@ -8,7 +8,7 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
  directives: [FORM_DIRECTIVES]
 })
 class E2EApp {
-  defaultSearch: string;
+  defaultSearch: string = 'filter';
  customPlaceholder: string;
  defaultCancel: string;
  customCancel: string;
@@ -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);
    });
  }
 }
--- a/ionic/components/searchbar/test/floating/main.html
+++ b/ionic/components/searchbar/test/floating/main.html
@@ -1,18 +1,22 @@
 <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>
+  </p>

  <h5 padding-left> Search - Custom Placeholder </h5>
  <ion-searchbar [(ngModel)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>

-  <h5 padding-left> Search - Default Cancel Button </h5>
-  <ion-searchbar [(ngModel)]="defaultCancel" showCancel="true" class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+  <h5 padding-left> Search - Hide Cancel Button </h5>
+  <ion-searchbar [(ngModel)]="defaultCancel" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>

  <h5 padding-left> Search - Custom Cancel Button Danger </h5>
-  <ion-searchbar [(ngModel)]="customCancel" showCancel="true" cancelText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customCancel" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>

  <h5 padding-left> Search - Custom Cancel Action</h5>
-  <ion-searchbar [(ngModel)]="customCancelAction" showCancel="true" cancelText="Done" [cancelAction]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customCancelAction" cancelButtonText="Done" [cancelAction]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>

  <div *ngIf="clickedCustomAction">
    Clicked custom action with input = {{customCancelAction}}
--- a/ionic/components/searchbar/test/toolbar/main.html
+++ b/ionic/components/searchbar/test/toolbar/main.html
@@ -5,22 +5,22 @@
 <ion-content>
  <h5 padding-left padding-top> Search - Default Toolbar </h5>
  <ion-toolbar>
-    <ion-searchbar [(ngModel)]="defaultToolbarSearch" showCancel="true" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="defaultToolbarSearch" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
  </ion-toolbar>

  <h5 padding-left padding-top> Search - Primary Toolbar </h5>
  <ion-toolbar primary>
-    <ion-searchbar [(ngModel)]="primaryToolbarSearch" showCancel="true" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
  </ion-toolbar>

  <h5 padding-left padding-top> Search - Danger Toolbar </h5>
  <ion-toolbar danger>
-    <ion-searchbar [(ngModel)]="dangerToolbarSearch" showCancel="true" class="e2eDangerToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="dangerToolbarSearch" class="e2eDangerToolbarSearchbar"></ion-searchbar>
  </ion-toolbar>

  <h5 padding-left padding-top> Search - Light Toolbar </h5>
  <ion-toolbar light>
-    <ion-searchbar [(ngModel)]="lightToolbarSearch" showCancel="true" class="e2eLightToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="lightToolbarSearch" class="e2eLightToolbarSearchbar"></ion-searchbar>
  </ion-toolbar>

 </ion-content>
--- a/ionic/config/directives.ts
+++ b/ionic/config/directives.ts
@@ -24,7 +24,7 @@ import {TextInput, TextInputElement} from '../components/text-input/text-input';
 import {Label} from '../components/text-input/label';
 import {Segment, SegmentButton} from '../components/segment/segment';
 import {RadioGroup, RadioButton} from '../components/radio/radio';
-import {Searchbar} from '../components/searchbar/searchbar';
+import {Searchbar, SearchbarInput} from '../components/searchbar/searchbar';
 import {Nav} from '../components/nav/nav';
 import {NavPush, NavPop} from '../components/nav/nav-push';
 import {NavRouter} from '../components/nav/nav-router';
@@ -144,6 +144,7 @@ export const IONIC_DIRECTIVES = [

  // Forms
  Searchbar,
+  SearchbarInput,
  Segment,
  SegmentButton,
  Checkbox,