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() {