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

fixes #17241
This commit is contained in:
Manu MA
2019-01-24 13:22:58 +01:00
committed by GitHub
parent d26d43d6ab
commit 986e67b02a
2 changed files with 20 additions and 11 deletions

View File

@ -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;

View File

@ -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>