diff --git a/core/src/components/item-sliding/item-sliding.scss b/core/src/components/item-sliding/item-sliding.scss index 0e2cc06795..c52b8d5d4e 100644 --- a/core/src/components/item-sliding/item-sliding.scss +++ b/core/src/components/item-sliding/item-sliding.scss @@ -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() { diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index c6f4546809..ec605429b5 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -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;