Ionic 2 list avoid accidental click while scrolling

Ionic Framework ionic-v3
1

Hi Team,

In the following contacts list in iOS 10 device, while doing infinite scrolling, many times the click event gets fired and the contact detail page gets displayed.

  <ion-content class="contacts-page-content">
    <ion-list>
      <button ion-item *ngFor="let contact of contacts | async" (click)="showContactDetails(contact)" text-wrap class="contacts">
          <ion-avatar item-left>
            <img[src]="contact.picture">
          </ion-avatar>
          <h2 class="contact-name">{{contact.firstName}} {{contact.lastName}}</h2>
          <h4 ion-text color="grayText">{{contact.jobTitle}}</h4>
          <h3 class="contact-supplier" *ngIf="contact.supplierName">{{contact.supplierName}}</h3>
      </button>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="pullMoreContacts($event)">
           <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="Loading more contacts...">
          </ion-infinite-scroll-content>
    </ion-infinite-scroll>   
  </ion-content>

Is there anyway the click while scrolling can be avoided? Any help is greatly appreciated.

Thanks.

2 Likes
2

I have this problem too.

3

Same problem here ! Any solution found ?

4

The reported issue still there. I tried using Tap instead of click, it has reduced the accidental clicks. But still it opens the detail page few times.

As I never get any response from ionic forum, I’ve posted the same question in stackoverflow and got some responses. Please visit the following thread for more details;