diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index e99fbae465..cdea0b3d9c 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -6,45 +6,48 @@ import {ConfigComponent} from '../../config/decorators';
import {Icon} from '../icon/icon';
/**
+ * @name Searchbar
+ * @module ionic
* @description
- * The Search Bar service adds an input field which can be used to search or filter items.
+ * Manages the display of a search bar which can be used to search or filter items.
*
* @usage
* ```html
- *
+ *
* ```
+ *
+ * @property [placeholder] - sets input placeholder to value passed in
+ * @property [show-cancel] - shows the cancel button based on boolean value passed in
+ * @property [cancel-text] - sets the cancel button text to the value passed in
+ * @property [cancel-action] - the function that gets called by clicking the cancel button
*/
@ConfigComponent({
selector: 'ion-searchbar',
defaultInputs: {
'showCancel': false,
'cancelText': 'Cancel',
- 'placeholder': 'Search',
- 'cancelAction': function(event, query) {
- this.element = this.elementRef.nativeElement.querySelector('input');
- this.element.blur();
- this.clearInput();
- this.shouldLeftAlign = false;
- }
+ 'placeholder': 'Search'
},
+ inputs: ['cancelAction'],
host: {
'[class.left-align]': 'shouldLeftAlign',
'[class.focused]': 'isFocused',
},
template:
'
' +
- '' +
+ '' +
'' +
'' +
'' +
'
' +
- '',
+ '',
directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon]
})
export class Searchbar extends Ion {
/**
* @private
+ * This holds the searchbar input value used for querying
*/
query: string;
@@ -57,10 +60,9 @@ export class Searchbar extends Ion {
super(elementRef, config);
this.renderer = renderer;
this.elementRef = elementRef;
- if(!ngControl) {
- // They don't want to do anything that works, so we won't do anything that breaks
- return;
- }
+
+ // If there is no control then we shouldn't do anything
+ if (!ngControl) return;
this.ngControl = ngControl;
this.ngControl.valueAccessor = this;
@@ -68,6 +70,8 @@ export class Searchbar extends Ion {
/**
* @private
+ * After the view has initialized check if the searchbar has a value
+ * and then store that value in query
*/
afterViewInit() {
// If the user passes in a value to the model we should left align
@@ -77,8 +81,7 @@ export class Searchbar extends Ion {
/**
* @private
- * Much like ngModel, this is called from our valueAccessor for the attached
- * ControlDirective to update the value internally.
+ * Write a new value to the element.
*/
writeValue(value) {
this.query = value;
@@ -86,6 +89,7 @@ export class Searchbar extends Ion {
/**
* @private
+ * Set the function to be called when the control receives a change event.
*/
registerOnChange(fn) {
this.onChange = fn;
@@ -93,6 +97,7 @@ export class Searchbar extends Ion {
/**
* @private
+ * Set the function to be called when the control receives a touch event.
*/
registerOnTouched(fn) {
this.onTouched = fn;
@@ -100,6 +105,7 @@ export class Searchbar extends Ion {
/**
* @private
+ * Updates the value of the control when the searchbar input changes.
*/
inputChanged(event) {
this.writeValue(event.target.value);
@@ -108,6 +114,7 @@ export class Searchbar extends Ion {
/**
* @private
+ * Sets the searchbar to focused and aligned left on input focus.
*/
inputFocused() {
this.isFocused = true;
@@ -116,14 +123,34 @@ export class Searchbar extends Ion {
/**
* @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);
+ }
}
diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts
index 96b27395b4..e375587be2 100644
--- a/ionic/components/searchbar/test/floating/index.ts
+++ b/ionic/components/searchbar/test/floating/index.ts
@@ -24,4 +24,12 @@ class E2EApp {
console.log("Clicked cancel action with", query);
this.clickedCustomAction = true;
}
+
+ triggerInput() {
+ // 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);
+ });
+ }
}
diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html
index eedd8d323f..ad7b9c4be8 100644
--- a/ionic/components/searchbar/test/floating/main.html
+++ b/ionic/components/searchbar/test/floating/main.html
@@ -1,6 +1,6 @@