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

Prevent click event on drop

未关闭
#405 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
analysis needed
主要语言
TypeScript
星标
299
派生
159
平均合并
4 天 6 小时
30 天内合并 PR
4

描述

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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。