From 8108edd876b10834015016385dc3cd5b8f31fbfa Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 16 Sep 2021 12:29:12 -0400
Subject: [PATCH] fix(item-sliding): item-sliding accounts for multiple
 ion-item elements (#23943)

resolves #19312
---
 .../components/item-sliding/item-sliding.tsx  |  7 +++++
 .../item-sliding/test/basic/index.html        | 26 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index cd6b67841c..b2a854975c 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -270,6 +270,13 @@ export class ItemSliding implements ComponentInterface {
   }
 
   private onStart() {
+    /**
+     * We need to query for the ion-item
+     * every time the gesture starts. Developers
+     * may toggle ion-item elements via *ngIf.
+     */
+    this.item = this.el.querySelector('ion-item');
+
     // Prevent scrolling during gesture
     this.disableContentScrollY();
 
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index c5ebbbc100..4a4d6f2784 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -41,6 +41,7 @@
         <ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
         <ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
         <ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
+        <ion-button expand="block" onclick="setDynaicItem()">Swap dynamic item</ion-button>
       </div>
 
       <ion-list id="list">
@@ -369,6 +370,17 @@
             </ion-item-options>
           </ion-item-sliding>
 
+          <ion-item-sliding id="dynamic-item">
+            <ion-item>
+              <ion-label>Dynamic First Item</ion-label>
+            </ion-item>
+            <ion-item-options side="end">
+              <ion-item-option color="tertiary" expandable>
+                First Item Options
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
           <ion-item>
             <ion-label class="ion-text-wrap">
               <h2>Normal ion-item (no sliding)</h2>
@@ -387,6 +399,20 @@
       </ion-list>
 
       <script>
+        const setDynaicItem = () => {
+          const sliding = document.querySelector('#dynamic-item');
+          sliding.innerHTML = `
+            <ion-item>
+              <ion-label>Dynamic Second Item</ion-label>
+            </ion-item>
+            <ion-item-options side="end">
+              <ion-item-option color="tertiary" expandable>
+                Second Item Options
+              </ion-item-option>
+            </ion-item-options>
+          `
+        }
+
         var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
 
         // Toggle the dynamic options