search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.93k stars 13.52k forks source link

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

Closed Lightk3ira closed 3 years ago

Lightk3ira commented 3 years ago

Prequisites

Ionic Framework Version

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.

image

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-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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Lightk3ira commented 3 years ago

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

liamdebeasi commented 3 years ago

Thank you for testing!

liamdebeasi commented 3 years ago

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23973, and a fix will be available in an upcoming release of Ionic Framework.

Lightk3ira commented 3 years ago

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!

Lightk3ira commented 3 years ago

Do you have an ETA when that release will occur with the fix?

liamdebeasi commented 3 years ago

We release roughly every 2-3 weeks with our most recent release on September 15. (There was a 5.8.1 release a few days ago, but that was a hotfix to fix a regression).

ionitron-bot[bot] commented 2 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.