react-use icon indicating copy to clipboard operation
react-use copied to clipboard

useDropArea with child elements

Open milogert opened this issue 3 years ago • 0 comments

What is the current behavior?

useDropArea on an element with children elements doesn't seem to work as expected.

Essentially, if you have a child element inside a drop area the state.over boolean switches to false if you hover over the child until you totally leave the drop area and then re-hover. After which the same loop can be performed.

The drop still seems to work correctly, but when the state.over variable toggles it can affect styles, making it look like the drop is no longer occurring.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:

I have created a Code Sandbox to demonstrate the issue: https://codesandbox.io/s/prod-cache-qct8z2

What is the expected behavior?

Children shouldn't affect the state.over variable for a parent element.

A little about versions:

  • OS: Mac OS 12.4
  • Browser (vendor and version): Brave v 1.39.120
  • React: 18.0.0
  • react-use: 17.4.0
  • Did this worked in the previous package version? Not that I know of. I am also using 14.1.0 in the project I noticed this in and the same issue still occurs.

milogert avatar Jul 26 '22 13:07 milogert