From baafe08927b7b858170496605781e6fa682e0147 Mon Sep 17 00:00:00 2001
From: archzaiko <artem.zaiko@gmail.com>
Date: Thu, 24 Sep 2020 21:43:32 +0300
Subject: [PATCH] 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
---
 .../reorder-group/test/basic/index.html        | 18 ++++++++++++++++++
 core/src/components/reorder/reorder.tsx        | 12 ++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/core/src/components/reorder-group/test/basic/index.html b/core/src/components/reorder-group/test/basic/index.html
index 1f9aaa8311..36f1017e17 100644
--- 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
index 18b4d997ba..a013f20aa5 100644
--- 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() {