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 @@ + + + + Item 11 (the whole item can be dragged) + + + + + + + + + Item 12 (the whole item can be dragged) + + + + + 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() {