bug: Two fingers causes ion-item-sliding to not close in Android

[Lightk3ira]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

The bug occurs when you have multiple ion-sliding-items. When you slide an item with 1 finger and then simultaneously touch another slider item, then let go of them, when sliding a new item the original sliding item will not close. As shown in the image below of the outcome. This is a bare bones example that is running on a mobile device and is mirrored using google chromes device inspector.

Expected Behavior

The expected behavior is that when sliding an item and touching another item, when you slide another item after it should close the previous ion-sliding-item.

Steps to Reproduce

1. Create a new empty angular ionic application
2. Create a list of ion-sliding-items each with 1 or many options
3. Build the application for Android
4. Run the application on Android device
5. Place finger on one of the ion-sliding-items
6. Start dragging, do not lift finger
7. During the previous steps drag use another finger and tap and hold another ion-sliding-item
8. Let go of the second finger and let go of your sliding finger
9. One ion-item-sliding should be open, this is correct
10. Place your finger on a different ion-sliding-item that is closed and swipe it open
11. You should now see the first ion-sliding-item was not closed. There should now be two ion-sliding-items that are open

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.12.3 (C:\Users\xt27901\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.6.14
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

cordova-res : not installed
native-run : 1.0.0

System:

Android SDK Tools : 26.1.1 (C:\Users\xt27901\AppData\Local\Android\Sdk)
NodeJS : v14.17.4 (C:\Program Files\nodejs\node.exe)
npm : 6.14.14
OS : Windows 10

Additional Information

Cannot seem to push a repo due to proxies. However this is the relevant code you need to add after creating a new application

HubStruck Notifications

A new message in your network

Oceanic Next has joined your network

10:45 AM

  <ion-item-options side="end">
    <ion-item-option color="danger">
      <ion-icon slot="icon-only" name="trash"></ion-icon>
    </ion-item-option>
    <ion-item-option>
      <ion-icon slot="icon-only" name="star"></ion-icon>
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

<ion-item-sliding>
  <ion-item>
    <ion-label>
      <h2>HubStruck Notifications</h2>
      <p>A new message in your network</p>
      <p>Oceanic Next has joined your network</p>
    </ion-label>
    <ion-note slot="end">
      10:45 AM
    </ion-note>
  </ion-item>

  <ion-item-options side="end">
    <ion-item-option color="danger">
      <ion-icon slot="icon-only" name="trash"></ion-icon>
    </ion-item-option>
    <ion-item-option>
      <ion-icon slot="icon-only" name="star"></ion-icon>
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

<ion-item-sliding>
  <ion-item>
    <ion-label>
      <h2>HubStruck Notifications</h2>
      <p>A new message in your network</p>
      <p>Oceanic Next has joined your network</p>
    </ion-label>
    <ion-note slot="end">
      10:45 AM
    </ion-note>
  </ion-item>

  <ion-item-options side="end">
    <ion-item-option color="danger">
      <ion-icon slot="icon-only" name="trash"></ion-icon>
    </ion-item-option>
    <ion-item-option>
      <ion-icon slot="icon-only" name="star"></ion-icon>
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

[liamdebeasi]

Thanks for the issue. I can reproduce this on iOS as well, though it is a bit harder to reproduce. The issue is that even after attempting to close the item, we are still accepting a gesture. Moving the item sliding a tiny bit will cause the item to remain open.

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/angular@5.9.0-dev.202109231358.4c3aac6

[Lightk3ira]

Thank you, I will pull and test and have our QA team test as well. WIll update you on the details ASAP

[Lightk3ira]

@liamdebeasi My team and I have tested this bug dilligently and it appears the issue is now resolved. It is working perfectly now.

[liamdebeasi]

Thank you for testing!

[liamdebeasi]

Thanks for the issue. This has been resolved via #23973, and a fix will be available in an upcoming release of Ionic Framework.

[Lightk3ira]

Thank you so much for the quick responses and fix. It is much appreciated. If there is anything else I can do please feel free to reach out.

Thanks again!