`useDrop` child trigger avoidance does not work reliably
- Dominant language
- TypeScript
- Stars
- 15k
- Forks
- 2.8k
- Avg merge
- 15h 7m
- Merged PRs (30d)
- 2
Description
In the code there's a helpful link (great!) that explains what `useDrop()` does to avoid the child `dragleave` problem:
https://github.com/alibaba/hooks/blob/375cc75646a3bcd02cde157739e35868833f0a04/packages/hooks/src/useDrop/index.ts#L22
That link expanded: https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element/26459269#26459269
So apparently the code is trying to guard against duplicate events when the drag moves over child elements (nice). I think it's not documented on https://ahooks.js.org/hooks/use-drop though (would be good if it were).
However, this approach does not work well.
As [one commenter says](https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element/26459269#comment64269475_26459269):
> This doesn't help tho for the problem of duplicate dragenter events
Indeed, see this example:
https://codesandbox.io/s/basic-usage-forked-z966n5
When you drag in between multiple child elements, `onDragEnter` is fired repeatedly; video:
https://user-images.githubusercontent.com/399535/215287335-668f3d8f-d79a-4f95-b79a-3aa82490668e.mp4
This can result in flickering if you do GUI operations in `onDragEnter`.
Contributor guide
Assessment
This issue has not been assessed yet.