fix(reorder): capture click event (#17244)

fixes #17241
ionic-team · Jan 24, 2019 · 986e67b · 986e67b
1 parent d26d43d
commit 986e67b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git 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,23 +83,23 @@
           </ion-item>
 
           <ion-reorder>
-            <ion-item>
+            <ion-item button onclick="openAlert()">
               <ion-label>
                 Item 8 (the whole item can be dragged)
               </ion-label>
             </ion-item>
           </ion-reorder>
 
           <ion-reorder>
-            <ion-item>
+            <ion-item button onclick="openAlert()">
               <ion-label>
                 Item 9 (the whole item can be dragged)
               </ion-label>
             </ion-item>
           </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
@@ -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>