Ionic-framework: <ion-searchbar> (ionClear) is calling twice

[Bloggerschmidt]

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

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:

Clicking the clear button in <ion-searchbar> (the x at the end) (ionClear) is calling a function twice (for the event types 'mousedown' and 'click').

Expected behavior:

(ionClear) should call only once (for event type 'click' or (!) 'mousedown')

Steps to reproduce:

ionic start --v2 myApp blank

Related code:

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-searchbar 
    primary 
    [(ngModel)]="address" 
    (ionClear)="clearSearch($event)"
></ion-searchbar>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    address = '';

    constructor(public navCtrl: NavController) {
    }

    clearSearch(e) {
        console.log('clearSearch', e);
    }

}

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

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Hello, thanks for using Ionic! We will look into this.

[redlotus]

I got the same problem too. Any update on this?

[lowbird187]

Still the same problem, any updates ? Thank you.

[John0x]

Confirming this. Using the newest ionic version.

[hitpopdimestop]

Same on ionic 3.0.1

[shanesmith]

Same issue exists with (ionCancel)

[imdadturi]

same issue with search bar ionClear
`cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 1.3.7
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.3
Node              : v6.9.1
npm               : 4.6.1
OS                : Windows 8.1

`

[ibnclaudius]

Same problem here.

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.4.0
npm  : 5.5.1 
OS   : macOS Sierra

[Bengejd]

An annoying bug for sure, but easy workaround for the time being:

 cancelSearch() {
    this.searchCounter++;
    if(this.searchCounter % 2 == 0) { // Workaround for cancel search running twice on click...Ionic team issue.
... Do stuff here ...
    }
  }

[rzodkiem]

Any updates on this? Issue still exists, nothing changes over the versions

[imdadturi]

@rzodkiem you have to do some workaround, if you check search bar source (node_modules/ionic-angular/components/searchbar/searchbar.js) there are two events that are calling clear event one is click and the other is mousedown event. Remove one from
template: '<div class="searchbar-input-container">' + '<button ion-button mode="md" (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear color="dark" class="searchbar-md-cancel" type="button">' + '<ion-icon name="md-arrow-back"></ion-icon>' + '</button>' + '<div #searchbarIcon class="searchbar-search-icon"></div>' + '<input #searchbarInput class="searchbar-input" (input)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocused()" ' + 'dir="auto" ' + '[attr.placeholder]="placeholder" ' + '[attr.type]="type" ' + '[attr.autocomplete]="_autocomplete" ' + '[attr.autocorrect]="_autocorrect" ' + '[attr.spellcheck]="_spellcheck">' + '<button ion-button clear class="searchbar-clear-icon" [mode]="_mode" (click)="clearInput($event)" (mousedown)="clearInput($event)" type="button"></button>' + '</div>' + '<button ion-button #cancelButton mode="ios" [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel" type="button">{{cancelButtonText}}</button>',

will call once then. Hope it helps

[rnwolfe]

Issue still exists on Ionic 4 beta.

ionic info

Ionic:

   ionic (Ionic CLI)          : 4.0.2 (C:\Users\rnwol\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.3
   @capacitor/core           : 1.0.0-beta.3

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.2.0
   OS     : Windows 10

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/163