-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Ion-item-sliding option can be clicked for a moment after item is closed #22722
Comments
Thanks for the issue! This issue has been labeled as In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you! |
Thanks for the issue! This issue has been labeled as Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue. For a guide on how to create a good reproduction, see our Contributing Guide. |
@liamdebeasi |
Thanks, I can reproduce the issue. Looks like this is due to a ionic-framework/core/src/components/item-sliding/item-sliding.tsx Lines 361 to 364 in f81d18c
|
@liamdebeasi any workaround for that? |
It has been almost one year. Do we have a solution or version with a fix for this yet? |
I have created a flexible workaround:
so basically add the $event from click to determine if the slider is open or not based on the transform style. Then pass in your function that you would be calling for that button as the second parameter. Then pass in whatever parameters you would normally pass to the function. So in example:
would become:
Note that this still doesn't run the click event on the ion-item if it exists but it does prevent the buttons from running while the slider is closed. The primary weak point in the handleSideBtn function is the slider variable, I wrote this under the assumption that this guide is followed strictly https://ionicframework.com/docs/api/item-sliding with no extra elements. |
@kixes: Does this issue still exist in Ionic v6? |
Issue number: resolves #22722 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Item Sliding Options are not disabled until after a 600ms timeout. This timeout exists to allow the close transition to complete. Without the timeout, the item sliding options disappear without a transition. I explored waiting for the `transitionend` event instead of the `setTimeout`, but the bug persisted. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - If an item sliding is closing then we add a class to the host. This class disables pointer events on all `ion-item-options` children so the buttons cannot be accidentally tapped while closing. This class is then removed after the 600ms timeout. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
Thanks for the issue. This has been resolved via #27829, and a fix will be available in an upcoming release of Ionic Framework. |
Issue number: resolves #22722 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Item Sliding Options are not disabled until after a 600ms timeout. This timeout exists to allow the close transition to complete. Without the timeout, the item sliding options disappear without a transition. I explored waiting for the `transitionend` event instead of the `setTimeout`, but the bug persisted. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - If an item sliding is closing then we add a class to the host. This class disables pointer events on all `ion-item-options` children so the buttons cannot be accidentally tapped while closing. This class is then removed after the 600ms timeout. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
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. |
'ion-item-sliding' 'option' is clickable even when slide is closed.
for example in the following is user click on same location where 'Lorem' button was displayed, after closing the slide, it will trigger 'unread' function.
Problem is that after sliding is closed it takes bit time to remove 'slide-active' classes. In this mean time when user click on item on same function, it get clicked on item option even item option is not visible.
Ionic version:
ionic --version: 6.12.1
Expected behavior:
After item sliding is closed the options should not be clickable. This should happen fast.
Steps to reproduce:
From above code, Just slide to see 'Lorem' option.
Now close the slide and click on same position where lorem option was displayed. (or on trash icon)
- it will trigger 'unread' function.
The text was updated successfully, but these errors were encountered: