Searchbar typing bug

Ionic Framework ionic-v3
1

Hi,

I’m learning ionic 2 and testing components. I’ve put this HTML in order to test an empty search bar:

<ion-searchbar ></ion-searchbar>
<ion-list>
  <ion-item>
  
  </ion-item>
</ion-list>

When you type the input is being removed depending on how fast you type or if you first type a key and then hold the key. Consider this:

  1. Type ‘A’ (any key works :slight_smile: )
  • immediately after step 1, Hold ‘A’
  • check that the first ‘A’ from step 2 gets removed.

You can check this too:

  1. Type ‘A’
  • Type ‘A’ again immediately in a way that you delay the keypress but not too long.
  • Check that you will have only just one ‘A’

Seems that could be an issue with keypress and keydown events. Anyway, I think that this is not expected behaviour, as I noted that could happens when you are typing normally (like the second scenario: depends on the time you hold the key that could not be considered a hold event but it hasn’t to be fast enough to be just a keypress)

2

It could be a bug, but it definitely has to do with the debounce attribute on the searchbar. This is 250ms on default, to prevent a search on every single keystroke. If you’re experiencing issues with the ‘disappearing’ letter, just put up the debounce time :-).

3

hey :slight_smile: thanks for replying

The weird thing is if you type it in the API docs works fine.

But in the components page you can check that the behaviour I’m talking about happens every time you type.

Edit: I keep thinking in the debounce attribute. It’s so hard for me to explain the scenario. I invite you to try following the cases in my previous post to understand what I want to explain. Remember to try it in the components page. The debounce is only happening on long-keypress. If you type fast enough this never happens.

4

Oh @gentunian I already reproduced what you’ve tried to explain before my previous post :-). What I was trying to say, is that I don’t experience this as a real annoying bug (yet). But it’s definitely there… To make it even weirder, if I try it on my Android device it doesn’t seem to happen.

5

Hi,

I think I have a similar issue (on browser & Android at least).
It seems that the search text is modified to be coherent with the search result.
For example :

  • search ‘A’
  • search ‘AA’
  • results for ‘A’ come back
  • search text is set to ‘A’

I’m not really sure about this and I didn’t look at the source code but playing with the debounce made me think of this.
BTW, augmenting the debounce technically fix the problem but having it quite high (600 now for me) is a really bad UX…

6

Interesting, in my case, lowering the debounce attribute makes the search bar works OK.