alibaba / alibaba/hooks

`useDrop` child trigger avoidance does not work reliably

Open
#2,036 3 comments 0 reactions 1 assignee Claimed by @liuyib View on GitHub
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

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.