adopted-ember-addons / adopted-ember-addons/ember-sortable

Prevent click event on drop

Abierto
#405 2 comentarios 0 reacciones 0 asignados Ver en GitHub
analysis needed
Lenguaje dominante
TypeScript
Estrellas
299
Forks
159
Merge medio
4 d 6 h
PR fusionados (30 d)
4

Descripción

**Describe the bug**
Click event **inside** a `sortable-item` is triggered on drop.

**To Reproduce**
```javascript
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { A } from '@ember/array';

export default class DragList extends Component {
@tracked
_items = [ 'Uno', 'Dos', 'Tres', 'Cuatro', 'Cinco' ];

get items() {
return this._items;
}

@action
update(newOrder) {
this._items = A(newOrder);
}

@action
rowClicked() {
console.log('clicked');
}
}
```

```handlebars


    {{#each this.items as |item|}}


  1. {{item}}


  2. {{/each}}

```
=> This will **not** trigger the `rowClicked` action, which is the expected behaviour here since there is [this code](https://github.com/adopted-ember-addons/ember-sortable/blob/468ee0c653260d65bf6cc4035dfdee29bb68bb70/addon/modifiers/sortable-item.js#L600) which will not propagate / bubble up the event.

```handlebars


    {{#each this.items as |item|}}


  1. {{item}}


  2. {{/each}}

```
=> This will trigger the `rowClicked` action, which I don't want to happen. Is this a known / expected behaviour ? Do you have any fix / workaround ?

My workaround is to assert parent's class `is-dropping` in the click event like this:
```javascript
@action
rowClicked(e) {
if (!e.target.parentElement.classList.contains('is-dropping')) {
console.log('clicked');
}
}
```

**Expected behavior**
Click event **inside** `sortable-item` should **not** be triggered when dropping it. We previously used [ember-drag-drop](https://github.com/mharris717/ember-drag-drop) which had this behaviour built in.

**Other info**
- "ember-sortable": "2.2.1"
- "ember-cli": "3.20.0"
- Chrome Version 87.0.4280.141 on MacOS
- (Using `Ember Octane`, `Glimmer components` & `ember-sortable modifier`)

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.