bug: Searchbar cancel event is execute input function

[MatanYadaev]

Type: bug

Ionic Version: 2.x

Platform: all

When there is no text in searchbar and you click on cancel button, the searchbar is execute the (input) function (input)="loadItems($event)".

It's should execute the function only if there is text in search and than clicking cancel.

Look here my example here: https://drive.google.com/file/d/0B_2AM8ZhXhE9U3RGdEJtRF82Ujg/view

I wish you understood the problem...

[jgw96]

Hello @MatanYed ! Thanks for opening an issue with us! I cant seem to see your example, it looks like the url is incorrect, would you mind reposting it?

[MatanYadaev]

@jgw96 oh, oops, i added it now.

[jgw96]

@MatanYed Thanks, i can see the example now. Would you be able to provide a minimal code example that i can use to reproduce this? Thanks

[MatanYadaev]

@jgw96 Sure.

HTML:

<ion-toolbar class="slider" dark [class.closed]="!searchbarVisible">
    <ion-searchbar [(ngModel)]="searchQuery" (input)="loadSearchedPosts($event)"></ion-searchbar>
</ion-toolbar>

Typescript:

loadSearchedPosts(searchbar?) {
    this.posts = [];
    this.postsLoaded = false;

    this.feed.fetch(this.searchQuery).then(posts => {
        this.posts = posts;
        this.postsLoaded = true;
    });
}

[brandyscarney]

So this is because the input is cleared when clicking on the cancel button (and the input event gets emitted on the clear function). We could add a check that the input has a value prior to clearing it and only emit the input event when there is.

https://github.com/driftyco/ionic/blob/2.0/ionic/components/searchbar/searchbar.ts#L313

[brandyscarney]

Thanks for the issue. This will be fixed in the beta 9 release!