Ionic-framework: Ionic v2 - Searchbar - Skips / Deletes characters while typing

Created on 25 Mar 2016  路  6Comments  路  Source: ionic-team/ionic-framework

Short description of the problem:

While typing into an ion-searchbar it skips or deletes some of the characters i'm trying to type. It even does that on the demo site: http://ionicframework.com/docs/v2/api/components/searchbar/Searchbar/

What behavior are you expecting?

Expected normal typing into input without skipping.

Steps to reproduce:

  1. Just add the following tag to one of the pages
<ion-toolbar>
    <ion-searchbar placeholder="What are you looking for ?" (search)="addToSearchList($event)"
        [(ngModel)]="searchQuery" hideCancelButton="true">
    </ion-searchbar>
</ion-toolbar>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
None.

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.2 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.3 Build version 7D175 

Screenshot: (Attempting to write _cars_ in Google Chrome session in an ionic2 2 page with a searchbar)
search_input_skip

Most helpful comment

Hi @tonyawad88,

I had the same problem. Resolved it by specifying the [debounce]="500" property on the search bar as follow:

<ion-searchbar light [(ngModel)]="searchQuery" [debounce]="500" placeholder="Search Question" (input)="search($event)" (cancel)="cancel($event)" (clear)="cancel($event)"></ion-searchbar>

Giving the search bar enough time for users to type before it starts

All 6 comments

Hi @tonyawad88,

I had the same problem. Resolved it by specifying the [debounce]="500" property on the search bar as follow:

<ion-searchbar light [(ngModel)]="searchQuery" [debounce]="500" placeholder="Search Question" (input)="search($event)" (cancel)="cancel($event)" (clear)="cancel($event)"></ion-searchbar>

Giving the search bar enough time for users to type before it starts

It helps a bit thanks. @AdrianTeh
But the problem still exists where you have to wait for the debounce to occur before you can hit the enter key. I basically type in a keyword in the searchbar and hit enter which will create a chip. I can't hit the enter before the debounce occurs. As in it will ignore my enter key until the debounce occurs.

+1

+1

I have not able been to reproduce the problem. I'm hopeful that some other fix already fixed this, but it's probably that I'm not replicating this issue well. Would this group be able to test out the nightly version and see if it's still there? https://github.com/driftyco/ionic/tree/2.0/scripts#installing-nightly-version Thanks

I can't replicate either... I had the debounce adjusted to 400 to minimize the effect but now taking that off, I can't replicate it. It must have slipped in somehow :) .... I'll close for now and we'll re-open if it occurs again.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  路  3Comments

Macstyg picture Macstyg  路  3Comments

giammaleoni picture giammaleoni  路  3Comments

daveshirman picture daveshirman  路  3Comments

MrBokeh picture MrBokeh  路  3Comments