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

Prevent click event on drop

Ouverte
#405 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
analysis needed
Langage dominant
TypeScript
Étoiles
299
Forks
159
Merge moyen
4 j 6 h
PR mergées (30 j)
4

Description

**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`)

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.