From 6e4919caff90fc60988e5cc85ad7161844eb5b51 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:27:45 -0400
Subject: [PATCH] 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. -->
---
 core/src/components/item-sliding/item-sliding.scss |  3 +++
 core/src/components/item-sliding/item-sliding.tsx  | 10 ++++++++++
 2 files changed, 13 insertions(+)

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;