Ionic-framework: Dynamic list with ion-item-sliding and asyncpipe causes whole page to stop responding

[manybothans]

This might be related to https://github.com/driftyco/ionic/issues/9095, but I didn't see this specific behaviour reported. Pages with dynamic lists with <ion-item-sliding> will often stop to responding to taps and swipes all together. List scrolling seems to continue to work, but swiping the list or tapping any other button on the page does not.

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Pages with dynamic lists with <ion-item-sliding> will often stop to responding to taps and swipes all together. List scrolling seems to continue to work, but swiping the list or tapping any other button on the page does not.

Expected behavior:
Pages should always respond to taps and swipes normally.

Steps to reproduce:
Happens intermittently on any page with dynamic ion-list using ion-item-sliding.

Related code:

<ion-list *ngIf="hasItems() && accountIsApproved()">
  <ion-item-sliding #slidingIonItem class="item-thumbnail-left" *ngFor="let item of Ample.orderItems | async">
    <ion-item #ionItem (tap)="showSlider(slidingIonItem, ionItem)">
      <ion-thumbnail item-left>
        <img [src]="item.product_image" />
      </ion-thumbnail>
      <h2 class="cart-title">{{item.sku_name}} &middot; {{item.formated_name}}</h2>
      <div class="metas">
        <div class="meta">
          <span class="meta__title">QTY</span>
          <span class="meta__value">{{item.quantity}}</span>
        </div>
        <div class="meta">
          <span class="meta__title">Amount</span>
          <span class="meta__value">{{item.unit_grams * item.quantity}}g</span>
        </div>
        <div class="meta">
          <span class="meta__title">Price</span>
          <span class="meta__value">${{item.dollar_total_cost}}</span>
        </div>
      </div>
    </ion-item>
    <ion-item-options>
      <button ion-button color="danger" (tap)="removeFromCart(item)">Delete</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[brandyscarney]

Thanks for the issue! Could you try using the nightly and let me know if it's still an issue for you? We made some changes to gestures recently. :)

npm install --save --save-exact ionic-angular@nightly

[manybothans]

Hi Thanks! Sad to say it is still happening.

[manybothans]

@brandyscarney happy to try out any suggestions over the next couple days

[msbsh]

Hi @manybothans, did you find out anything new yet? Any workarounds you could suggest? We are having the same issue.

[manybothans]

Hey @wizzn, I never found a solution, no. I just stopped using the sliding behaviour.

[sburnicki]

I'm experiencing the same issue. Any progress on this?

[cedricDevWP]

up

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!