Ionic-framework: ionCancel trigger ionClear for ion-searchbar

Created on 9 Dec 2016  路  3Comments  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[ x] 2.1.13

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I am currently using ion-searchbar, when ionCancel function is called it will trigger the ionClear function.
when i then ionCancel function is called it will also call ionClear which makes it input become empty.

Expected behavior:

Suppose when i click on the ionCancel it will only not show the list.
Steps to reproduce:

Related code:

(ionCancel)="onCancel()"
 onCancel() { 
        // Not Show the list
        this.showList = false;
    }
(ionClear)="onClear($event)"
onClear(ev) { 
        // Show the results
        ev.target.value = '';
    }

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

Most helpful comment

Hi,
This behaviour is iOS behaviour but it makes no sense at all. There is already clear button there for this purpose and google maps app for iOS uses this cancel button for closing keyboard without clearing the input searchbar. User can see still the value in the input searchbar but keyboard is already closed. That is very usual behaviour if one implements google maps with autocomplete feature. I'm right implementing such a use case. Could you please consider this? thanks
meanwhile it can be fixed by commenting this.clearInput(ev); in source in npm_modules under components/searchbar/searchbar.js

Searchbar.prototype.cancelSearchbar = function (ev) {
        this.ionCancel.emit(ev);
        // this.clearInput(ev);
        this._shouldBlur = true;
        this._isActive = false;
    };  

All 3 comments

This is the intended behavior. Cancel generally means you're going to stop searching and should clear the searchbar.

A good example of this is opening ios's settings app, typing in search, then tapping cancel. Not only does it end the search, but clears the input.

Hi,
This behaviour is iOS behaviour but it makes no sense at all. There is already clear button there for this purpose and google maps app for iOS uses this cancel button for closing keyboard without clearing the input searchbar. User can see still the value in the input searchbar but keyboard is already closed. That is very usual behaviour if one implements google maps with autocomplete feature. I'm right implementing such a use case. Could you please consider this? thanks
meanwhile it can be fixed by commenting this.clearInput(ev); in source in npm_modules under components/searchbar/searchbar.js

Searchbar.prototype.cancelSearchbar = function (ev) {
        this.ionCancel.emit(ev);
        // this.clearInput(ev);
        this._shouldBlur = true;
        this._isActive = false;
    };  

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

BilelKrichen picture BilelKrichen  路  3Comments

Nick-The-Uncharted picture Nick-The-Uncharted  路  3Comments

manucorporat picture manucorporat  路  3Comments

masimplo picture masimplo  路  3Comments

SebastianGiro picture SebastianGiro  路  3Comments