Click in list item in simulator sometimes(!) doesn't work, in button or browser it does

Ionic Framework ionic-v3
1

Hello there,

I have a annoying problem regarding a click function in a list-item.
When testing in browsers, it always works. But when I test it in the emulator or on my device, 2 out of 3 clicks it doesn’t fire the click function. I tried long pressing, clicking fast, clicking on the text, at the beginning of the list item, at the end of the list item, it just doesn’t work always. There is no common rhythm to be found.

  <ion-item *ngFor="let audience of audience" (click)="pushProfilesList(audience)" > 
    <h2 class="list-title">{{audience.segment}}</h2>
    <span class="list-info">{{audience.amount}}</span>
  </ion-item>

This is my list item. I tried using the click without the ngFor (just a hard coded list-title and amount), but there is still the same problem.

  pushProfilesList(audience){
    // alert ('Click fired!!');
    this.nav.push(ProfilesListPage, audience);
  }

This is my function. I also tried alerting, but still: in the browser it works all the time, but on my device or in the simulator it doesn’t always work. You have to click like 5 times, before the event is fired.

Any help is appreciated! Thanks.

2

Well, I have looked for the answer for over a week, and right after I’ve posted to the forum, I found my answer. For everybody who experienced the same “problem”, here’s the solution:

Change <ion-item> to <button> with the styling of ion-item.

  <ion-list>
    <button ion-item *ngFor="let audience of audience" (click)="pushProfilesList(audience)">
        <h2 class="list-title">{{audience.segment}}</h2>
        <span class="list-info">{{audience.amount}}</span>
    </button>
  </ion-list>
2 Likes
3

I am also facing the same issue, in list click doesn’t fire correctly. using button instead of ion-item is not good solution. In this case if I click item while scroll list, click get fired yet it should stop scroll.

4

This did not work for me either. I’ve only found that putting the (click)=“myFunction” in a span instead of a button or ion-item is the only thing that has worked in the emulator.

5

Nevermind, at one point I was trying to do something like:

<button (click)="">

<ion-input></ion-input>
</button>

To open a custom datepicker component that set a value for the input.

In reality, I just needed to use the (focus) event instead on the ion-input. This gave the behavior I needed.