fix(item-sliding): item-sliding accounts for multiple ion-item elements (#23943)

resolves #19312

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();
 

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