fix(gesture): destroy gesture handler when it's done (#17184)

fixes #16433
fixes #16974

core/src/components/item-sliding/item-sliding.tsx

@@ -86,6 +86,7 @@ export class ItemSliding implements ComponentInterface {
   componentDidUnload() {
     if (this.gesture) {
       this.gesture.destroy();
+      this.gesture = undefined;
     }
 
     this.item = null;

core/src/components/menu/menu.tsx

@@ -201,6 +201,7 @@ export class Menu implements ComponentInterface, MenuI {
     }
     if (this.gesture) {
       this.gesture.destroy();
+      this.gesture = undefined;
     }
 
     this.animation = undefined;

core/src/components/nav/nav.tsx

@@ -130,6 +130,7 @@ export class Nav implements NavOutlet {
 
     if (this.gesture) {
       this.gesture.destroy();
+      this.gesture = undefined;
     }
 
     // release swipe back gesture and transition

core/src/components/picker-column/picker-column.tsx

@@ -82,6 +82,10 @@ export class PickerColumnCmp implements ComponentInterface {
   componentDidUnload() {
     cancelAnimationFrame(this.rafId);
     clearTimeout(this.tmrId);
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
   }
 
   private setSelected(selectedIndex: number, duration: number) {

core/src/components/range/range.tsx

@@ -183,6 +183,13 @@ export class Range implements ComponentInterface {
     this.gesture.setDisabled(this.disabled);
   }
 
+  componentDidUnload() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+
   private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {
     let step = this.step;
     step = step > 0 ? step : 1;

core/src/components/refresher/refresher.tsx

@@ -120,6 +120,10 @@ export class Refresher implements ComponentInterface {
 
   componentDidUnload() {
     this.scrollEl = undefined;
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
   }
 
   /**

core/src/components/reorder-group/reorder-group.tsx

@@ -84,6 +84,10 @@ export class ReorderGroup implements ComponentInterface {
 
   componentDidUnload() {
     this.onEnd();
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
   }
 
   /**
@@ -106,7 +110,6 @@ export class ReorderGroup implements ComponentInterface {
     }
     const item = findReorderItem(reorderEl, this.el);
     if (!item) {
-      console.error('reorder node not found');
       return false;
     }
     ev.data = item;
@@ -303,16 +306,14 @@ function indexForItem(element: any): number {
   return element['$ionIndex'];
 }
 
-function findReorderItem(node: HTMLElement, container: HTMLElement): HTMLElement | undefined {
-  let nested = 0;
-  let parent;
-  while (node && nested < 6) {
-    parent = node.parentNode as HTMLElement;
+function findReorderItem(node: HTMLElement | null, container: HTMLElement): HTMLElement | undefined {
+  let parent: HTMLElement | null;
+  while (node) {
+    parent = node.parentElement;
     if (parent === container) {
       return node;
     }
     node = parent;
-    nested++;
   }
   return undefined;
 }

core/src/components/router-outlet/route-outlet.tsx

@@ -83,6 +83,10 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
 
   componentDidUnload() {
     this.activeEl = this.activeComponent = undefined;
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
   }
 
   /** @internal */

core/src/components/toggle/toggle.tsx

@@ -118,6 +118,13 @@ export class Toggle implements ComponentInterface {
     this.disabledChanged();
   }
 
+  componentDidUnload() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+
   @Listen('click')
   onClick() {
     if (this.lastDrag + 300 < Date.now()) {