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
51.02k stars 13.51k forks source link

bug: ion-item-option buttons are tappable when the item appears closed #19636

Closed marpstar closed 3 years ago

marpstar commented 5 years ago

Bug Report

Ionic version:

[x] 4.x

Current behavior:

ion-sliding-item buttons can be triggered even when the item appears to be "closed". Additionally, when "closing" a sliding item, you can tap in the area where an ion-item-option was previously visible to trigger that option.

It seems that the buttons are enabled immediately as the slide transition begins. These ion-item-option components should be disabled until the slide open transition is 100% completed.

Expected behavior:

These ion-item-option components should be disabled until the slide open transition is 100% completed.

Steps to reproduce:

Before open:

  1. Have an ion-list with ion-items containing ion-item-options on the right side of the screen (i.e. you swipe left to reveal them)
  2. If you repeatedly tap on the far-right side of the screen and trigger the right-most ion-item-option will eventually be triggered.

Before close:

  1. Have an ion-list with ion-items containing ion-item-options on the right side of the screen (i.e. you swipe left to reveal them)
  2. Swipe to reveal the options of one item.
  3. Tap another item (to trigger the "close" transition of the "open" item).
  4. Quickly tap in the area where the options were visible. They can still be triggered for even a couple hundred milliseconds after it appears "closed"

Here's a video of the reproduction: https://www.dropbox.com/s/xq5c30d9jxml91t/ionic-sliding-item-issue.mov?dl=0

Notice that I can trigger the color picker even though the item appears closed.

Other information:

Previous issue: https://github.com/ionic-team/ionic/issues/18069

Ionic info:


Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.11.0
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.3.6
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : ios 5.0.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.0, (and 18 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/codysand/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.16.3 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 11.0 Build version 11A420a
liamdebeasi commented 3 years ago

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/22722. #22722 has the same underlying issue as the issue noted here.

ionitron-bot[bot] commented 3 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.