fix(reorder): allow click event propagation when reorder group is disabled (#21947)

Allow interactive components (e.g `<ion-checkbox>`) inside of an `<ion-reorder>` tag in a disabled `<ion-reorder-group>` to fire click events / have their state changed. 

fixes #21017

core/src/components/reorder-group/test/basic/index.html

@@ -115,6 +115,24 @@
             </ion-item>
           </ion-reorder>
 
+          <ion-reorder>
+            <ion-item>
+              <ion-label>
+                Item 11 (the whole item can be dragged)
+              </ion-label>
+              <ion-toggle></ion-toggle>
+            </ion-item>
+          </ion-reorder>
+
+          <ion-reorder>
+            <ion-item>
+              <ion-label>
+                Item 12 (the whole item can be dragged)
+              </ion-label>
+              <ion-checkbox></ion-checkbox>
+            </ion-item>
+          </ion-reorder>
+
         </ion-reorder-group>
       </ion-list>
     </ion-content>

core/src/components/reorder/reorder.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Host, Listen, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Host, Listen, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 
@@ -14,12 +14,20 @@ import { getIonMode } from '../../global/ionic-global';
   shadow: true
 })
 export class Reorder implements ComponentInterface {
+  @Element() el!: HTMLIonReorderElement;
 
   @Listen('click', { capture: true })
   onClick(ev: Event) {
+    const reorderGroup = this.el.closest('ion-reorder-group');
+
     ev.preventDefault();
+
+    // Only stop event propagation if the reorder is inside of an enabled
+    // reorder group. This allows interaction with clickable children components.
+    if (!reorderGroup || !reorderGroup.disabled) {
       ev.stopImmediatePropagation();
     }
+  }
 
   render() {
     const mode = getIonMode(this);