1

In the following contacts list in iOS 10 device, while doing infinite scrolling angular2+Meteor+Ionic2 app, 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.

annadurai
  • 172
  • 1
  • 9

1 Answers1

2

Check here for ionic 2 gestures. Try

(tap)=showContactDetails(contact)

instead of click.

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
  • Thanks for suggesting the (tap). It has reduced the accidental clicks. But after few infinite scrolls, the contact details page still gets displayed without a tap. Is there anyway to disable tab or click while scrolling in progress? – annadurai Feb 23 '17 at 06:59
  • Thanks a lot for all your help Suraj. I tried (tap)="showContactDetails(contact); $event.stopPropagation();" it seems to disable the tap and contact detail page is not getting displayed. I also tried adding return false in the showContactDetails function. But it doesn't fix the issue reported. The reported issue is not there when testing in android devices. Any other fix you want me to try? – annadurai Feb 24 '17 at 00:52
  • 1
    Tap introduces another issues, basically on Android because of tap scrolling becomes frozen: https://github.com/ionic-team/ionic/issues/11112 – Arsen Khachaturyan Jul 18 '17 at 19:46