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:
Liam DeBeasi
2023-07-20 14:27:45 -04:00
committed by GitHub
parent 5122ced9e1
commit 6e4919caff
2 changed files with 13 additions and 0 deletions

View File

@ -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() {

View File

@ -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;