javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(searchbar): emit blur and focus events

Browse Source 
closes #795
This commit is contained in:
Brandy Carney
2015-12-22 15:57:53 -05:00
parent 9395ed14f7
commit f30b9889df
3 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/searchbar/searchbar.ts
View File

@ -47,6 +47,8 @@ export class SearchbarInput {
* @property {string} [placeholder=Search] - Sets input placeholder to the value passed in
*
* @property {Any} [input] - Expression to evaluate when the Searchbar input has changed
* @property {Any} [blur] - Expression to evaluate when the Searchbar input has blurred
* @property {Any} [focus] - Expression to evaluate when the Searchbar input has focused
* @property {Any} [cancel] - Expression to evaluate when the cancel button is clicked.
* @property {Any} [clear] - Expression to evaluate when the clear input button is clicked.
*
@ -75,6 +77,8 @@ export class Searchbar extends Ion {
@Input() ngModel: any;
@Output() input: EventEmitter<Searchbar> = new EventEmitter();
@Output() blur: EventEmitter<Searchbar> = new EventEmitter();
@Output() focus: EventEmitter<Searchbar> = new EventEmitter();
@Output() cancel: EventEmitter<Searchbar> = new EventEmitter();
@Output() clear: EventEmitter<Searchbar> = new EventEmitter();
@ -147,6 +151,8 @@ export class Searchbar extends Ion {
* Sets the Searchbar to focused and aligned left on input focus.
*/
inputFocused() {
this.focus.emit(this);
this.isFocused = true;
this.shouldLeftAlign = true;
}
@ -164,6 +170,8 @@ export class Searchbar extends Ion {
this.blurInput = true;
return;
}
this.blur.emit(this);
this.isFocused = false;
this.shouldLeftAlign = this.value && this.value.trim() != '';
}

8
ionic/components/searchbar/test/floating/index.ts
View File

@ -27,4 +27,12 @@ class E2EApp {
triggerInput(searchbar) {
console.log("Triggered input", searchbar);
}
inputBlurred(searchbar) {
console.log("Blurred input", searchbar);
}
inputFocused(searchbar) {
console.log("Focused input", searchbar);
}
}

2
ionic/components/searchbar/test/floating/main.html
View File

@ -1,6 +1,6 @@
<ion-content>
<h5 padding-left> Search - Default </h5>
<ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
<ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
<p padding-left>
defaultSearch: <b>{{ defaultSearch }}</b>