From baafe08927b7b858170496605781e6fa682e0147 Mon Sep 17 00:00:00 2001 From: archzaiko Date: Thu, 24 Sep 2020 21:43:32 +0300 Subject: [PATCH] fix(reorder): allow click event propagation when reorder group is disabled (#21947) Allow interactive components (e.g ``) inside of an `` tag in a disabled `` to fire click events / have their state changed. fixes #21017 --- .../reorder-group/test/basic/index.html | 18 ++++++++++++++++++ core/src/components/reorder/reorder.tsx | 12 ++++++++++-- 2 files changed, 28 insertions(+), 2 deletions(-) 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() {