From 986e67b02aa4f67cea027a63b78660bd8116dc44 Mon Sep 17 00:00:00 2001
From: Manu MA <manu.valladolid@gmail.com>
Date: Thu, 24 Jan 2019 13:22:58 +0100
Subject: [PATCH] fix(reorder): capture click event (#17244)

fixes #17241
---
 .../reorder-group/test/basic/index.html       | 23 +++++++++++--------
 core/src/components/reorder/reorder.tsx       |  8 ++++++-
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/core/src/components/reorder-group/test/basic/index.html b/core/src/components/reorder-group/test/basic/index.html
index df8c776b53..3c6372e283 100644
--- a/core/src/components/reorder-group/test/basic/index.html
+++ b/core/src/components/reorder-group/test/basic/index.html
@@ -27,35 +27,35 @@
       <ion-list>
         <ion-reorder-group id="reorder">
 
-          <ion-item>
+          <ion-item button onclick="openAlert()">
             <ion-label>
               Item 1 (default ion-reorder)
             </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
-          <ion-item>
+          <ion-item button onclick="openAlert()">
             <ion-label>
               Item 2 (default ion-reorder)
             </ion-label>
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>
 
-          <ion-item>
+          <ion-item button onclick="openAlert()">
             <ion-label>
               Item 3 (default ion-reorder slot="start")
             </ion-label>
             <ion-reorder slot="start"></ion-reorder>
           </ion-item>
 
-          <ion-item color="secondary">
+          <ion-item button color="secondary">
             <ion-label>
               Item 4 (default ion-reorder slot="start")
             </ion-label>
             <ion-reorder slot="start"></ion-reorder>
           </ion-item>
 
-          <ion-item>
+          <ion-item button onclick="openAlert()">
             <ion-label>
               Item 5 (custom ion-reorder)
             </ion-label>
@@ -64,7 +64,7 @@
             </ion-reorder>
           </ion-item>
 
-          <ion-item>
+          <ion-item button onclick="openAlert()">
             <ion-label>
               Item 6 (custom ion-reorder)
             </ion-label>
@@ -73,7 +73,7 @@
             </ion-reorder>
           </ion-item>
 
-          <ion-item>
+          <ion-item button onclick="openAlert()">
             <ion-label>
               Item 7 (custom ion-reorder slot="start")
             </ion-label>
@@ -83,7 +83,7 @@
           </ion-item>
 
           <ion-reorder>
-            <ion-item>
+            <ion-item button onclick="openAlert()">
               <ion-label>
                 Item 8 (the whole item can be dragged)
               </ion-label>
@@ -91,7 +91,7 @@
           </ion-reorder>
 
           <ion-reorder>
-            <ion-item>
+            <ion-item button onclick="openAlert()">
               <ion-label>
                 Item 9 (the whole item can be dragged)
               </ion-label>
@@ -99,7 +99,7 @@
           </ion-reorder>
 
           <ion-reorder>
-            <ion-item>
+            <ion-item button onclick="openAlert()">
               <ion-label>
                 Item 10 (the whole item can be dragged)
               </ion-label>
@@ -113,6 +113,9 @@
   </ion-app>
 
   <script>
+    function openAlert() {
+      alert('click');
+    }
     function toggleEdit() {
       const reorderGroup = document.getElementById('reorder');
       reorderGroup.disabled = !reorderGroup.disabled;
diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx
index a2607553bc..2b4d3fd104 100644
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface } from '@stencil/core';
+import { Component, ComponentInterface, Listen } from '@stencil/core';
 
 import { Mode } from '../../interface';
 
@@ -14,6 +14,12 @@ export class Reorder implements ComponentInterface {
 
   mode!: Mode;
 
+  @Listen('click', { capture: true })
+  onClick(ev: Event) {
+    ev.preventDefault();
+    ev.stopImmediatePropagation();
+  }
+
   render() {
     return (
       <slot>