javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(reorder): allow click event propagation when reorder group is disabled (#21947)

Browse Source 
Allow interactive components (e.g `<ion-checkbox>`) inside of an `<ion-reorder>` tag in a disabled `<ion-reorder-group>` to fire click events / have their state changed. 

fixes #21017
This commit is contained in:
archzaiko
2020-09-24 21:43:32 +03:00
committed by GitHub
parent ea0e0499e2
commit baafe08927
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/reorder-group/test/basic/index.html
View File

@ -115,6 +115,24 @@
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label>
Item 11 (the whole item can be dragged)
</ion-label>
<ion-toggle></ion-toggle>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label>
Item 12 (the whole item can be dragged)
</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
</ion-reorder>
</ion-reorder-group>
</ion-list>
</ion-content>

10
core/src/components/reorder/reorder.tsx
View File

@ -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,12 +14,20 @@ 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();
// 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() {
const mode = getIonMode(this);