mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
fix(item-sliding): buttons are not interactive on close (#27829)
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. -->
This commit is contained in:
@ -29,6 +29,9 @@ ion-item-sliding .item {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.item-sliding-closing ion-item-options {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.item-sliding-active-swipe-end .item-options-end .item-option-expandable {
|
||||
@include multi-dir() {
|
||||
|
||||
@ -407,6 +407,9 @@ export class ItemSliding implements ComponentInterface {
|
||||
if (!this.item) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { el } = this;
|
||||
|
||||
const style = this.item.style;
|
||||
this.openAmount = openAmount;
|
||||
|
||||
@ -425,6 +428,12 @@ export class ItemSliding implements ComponentInterface {
|
||||
? SlidingState.Start | SlidingState.SwipeStart
|
||||
: SlidingState.Start;
|
||||
} else {
|
||||
/**
|
||||
* The sliding options should not be
|
||||
* clickable while the item is closing.
|
||||
*/
|
||||
el.classList.add('item-sliding-closing');
|
||||
|
||||
/**
|
||||
* Item sliding cannot be interrupted
|
||||
* while closing the item. If it did,
|
||||
@ -441,6 +450,7 @@ export class ItemSliding implements ComponentInterface {
|
||||
if (this.gesture) {
|
||||
this.gesture.enable(!this.disabled);
|
||||
}
|
||||
el.classList.remove('item-sliding-closing');
|
||||
}, 600);
|
||||
|
||||
openSlidingItem = undefined;
|
||||
|
||||
Reference in New Issue
Block a user