diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index 6c2d33b477..d8de4e94e7 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -14,52 +14,18 @@ import {Button} from '../button/button';
selector: '.searchbar-input',
})
export class SearchbarInput {
- @HostListener('keyup', ['$event'])
+ @HostListener('input', ['$event'])
/**
* @private
* Update the Searchbar input value when the input changes
*/
private inputChanged(ev) {
- this.writeValue(ev.target.value);
- this.onChange(ev.target.value);
+ ev.preventDefault();
}
- constructor(ngControl: NgControl, elementRef: ElementRef) {
+ constructor(elementRef: ElementRef) {
this.elementRef = elementRef;
-
- if (!ngControl) return;
-
- this.ngControl = ngControl;
- 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;
- }
-
}
@@ -92,7 +58,7 @@ export class SearchbarInput {
'' +
'' +
'
' +
- '' +
+ '' +
'' +
'' +
'',
@@ -110,18 +76,62 @@ export class Searchbar extends Ion {
@Output() cancel: EventEmitter = new EventEmitter();
@Output() clear: EventEmitter = new EventEmitter();
+ value: string = '';
+ blurInput = true;
+
@HostBinding('class.searchbar-focused') isFocused;
@HostBinding('class.searchbar-left-aligned') shouldLeftAlign;
- value: string = '';
- blurInput = true;
+ @HostListener('keyup', ['$event'])
+ /**
+ * @private
+ * Update the Searchbar input value when the input changes
+ */
+ private inputChanged(ev) {
+ this.value = ev.target.value;
+ this.onChange(this.value);
+ this.input.emit(this.value);
+ }
constructor(
elementRef: ElementRef,
config: Config,
+ ngControl: NgControl
) {
super(elementRef, config);
+
+ if (ngControl) {
+ this.ngControl = ngControl;
+ 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;
}
/**
@@ -159,7 +169,6 @@ export class Searchbar extends Ion {
// blurInput determines if it should blur
// if we are clearing the input we still want to stay focused in the input
if (this.blurInput == false) {
- console.log(this.searchbarInput);
this.searchbarInput.elementRef.nativeElement.focus();
this.blurInput = true;
return;
@@ -174,6 +183,7 @@ export class Searchbar extends Ion {
*/
clearInput() {
this.value = '';
+ this.onChange(this.value);
this.blurInput = false;
this.clear.emit(this);
}
diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts
index f106043615..f02e06b17a 100644
--- a/ionic/components/searchbar/test/floating/index.ts
+++ b/ionic/components/searchbar/test/floating/index.ts
@@ -19,14 +19,14 @@ class E2EApp {
}
onClearSearchbar(searchbar) {
- // console.log("Clicked clear input on", searchbar.value);
+ console.log("Clicked clear input on", searchbar);
}
onCancelSearchbar(searchbar) {
- console.log("Clicked cancel button with", searchbar.value);
+ console.log("Clicked cancel button with", searchbar);
}
triggerInput(searchbar) {
- // console.log("Triggered input", searchbar.value);
+ console.log("Triggered input", searchbar);
}
}