Ion-item click performance/delay after popping page


#1

I’m using the following for creating an exercises list. The items takes you to a new page showing the clicked exercise:

<ion-list class="profile-list" *ngIf="workout.exercises.length >= 1">
  <ion-item *ngFor="#exercise of workout.exercises; #i = index" (click)="openExercise(exercise)">
    <h2>
      {{ exercise.name }}
    </h2>
    <p>
      {{ getExerciseInfo(exercise) }}
    </p>
    <button clear item-right>
      <ion-icon name="arrow-dropright"></ion-icon>
    </button>
  </ion-item>
</ion-list>

Which works perfectly fine. But somehow, when pushing a new page (navigating to that page using the openExercise(exercise) click event) and then going back to the page with the code above, it takes a couple of seconds before I can click that item again. But the strange thing is, that the button with the ion-icon does works right away, without waiting a couple of seconds.

So in short, when coming back to this page, the item click event only works after a 2-3 seconds, but the button icon works right away. And this only happens when I’m navigating BACK to this page.

Hope somebody had any idea what is going on?? Thanks in advance!


#2

I have the exact same issue.
My app has a list with product items, which when tapped, open a product detail page as a modal. When the modal is closed, it takes around 2-3 seconds before the list item can be tapped again to open the modal, it just doesn’t respond at all in those 2-3 seconds.


#3

Well, I did solve it yesterday actually… Sort of…
The thing is, you must not use the <ion-item (click)="doSomething()"> markup, but instead use <button ion-item (click)="doSomething()">, this way it works right away without the delay. This will also add a nice arrow icon by itself, so I removed the arrow-dropright icon I initially had.

The second thing I discovered was, when using a multiline list-item, for example:

<button ion-item (click)="doSomething()">
    <h2>Title</h2>
    <p>SubTitle</p>
</button>

You will be right back where you started, somehow the button won’t get ‘clicked’ anymore and the delay is back. Did try to add pointer-events: none to the h2 and p element, but that didn’t work. So I came up with this dirty solution:

<button ion-item (click)="doSomething()">
    <strong>Title</strong>
    subTitle
</button>

and then style it with css the way I wanted it. This way it acts like its supposed to, without any delay, even when coming back from another page.

Hope this will help you, just figured this out yesterday, so there may be nicer ways to accomplish this…

EDIT: After some double checking and as @bryandh mentioned, using any encapsulated elements inside won’t work


#4

Maybe updating to Ionic 2 beta.6 will fix this issue?? It has a bug fix which looks like our problem… https://github.com/driftyco/ionic/commit/0521ce2


#5

So I updated to Ionic 2.0.0-beta.6 with the original markup, but it didn’t work, so I’ll keep using my workaround for now…


#6

Removing the encapsulating elements from the content also worked for me.
However, I see you used the <strong> HTML element in your content, in my case that still gives the same problem.

I was already using the <button ion-item (click)="doSomething()"> syntax so that didn’t do it for me either.

My content consists of two lines.

  1. The product name as string: {{ orderline.product.name }}
  2. The orderline quantity and product unit as string: {{ orderline.quantity }} x {{ orderline.product.unit }}
    I want to have a line break between line 1 and 2. I also want the second line to have a specific green font. I can’t think of a way to make this possible without using any elements with classes/ids to surround them with.

Any suggestions?


#7

Ooh, I got it to work!
I just manually applied the code used in the fix commit: https://github.com/driftyco/ionic/commit/0521ce2
I made sure the pointer-events: none; css property was applied to the ion-label in the ion-item.

It works excellent now without any delay. I think you should definitely try it again and make sure the pointer-events css-property is applied to the ion-label.


#8

Yes man! Very glad this also works for me!! Thanks for your time and effort!