fix(reorder): allow click event propagation when reorder group is dis…

…abled (#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
ionic-team · Sep 24, 2020 · baafe08 · baafe08
1 parent ea0e049
commit baafe08
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/core/src/components/reorder-group/test/basic/index.html b/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>

diff --git a/core/src/components/reorder/reorder.tsx b/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,11 +14,19 @@ 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();
-    ev.stopImmediatePropagation();
+
+    // 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() {