clauderic / clauderic/dnd-kit

[experimental] onDragOver event looses target data props when specifying a collision detector

Open
#1,779 0 comments 0 reactions 0 assignees View on GitHub
bug collision experimental react triage:done
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

When importing and passing an alternative collision detector to useDroppable (tested with both 'directionBiased' and 'shapeIntersection') I'm loosing the target.data attribute in the onDragOver event. It's just an empty object. As soon as I remove the collisionDetector prop from useDroppable, the data is available again. Here's a quick mock-up example:

```
// Component
import { directionBiased } from '@dnd-kit/collision';
...

const { ref: dropRef } = useDroppable({
id: 'some-id',
accepts: ['menu_item'],
data: { thingOne: 'foo', thingTwo: 'bar' },
collisionDetector: directionBiased,
});

// Dnd event handler
const onDragOver = (e) => {
console.log('target data', e.operation.target.data);
}
```

Output with collisionDetector specified in useDroppable: target data {}
Output without collisionDetector specified in useDroppable: target data {thingOne: 'foo', thingTwo: 'bar'}

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.