search

ethanselzer / react-cursor-position

A React component that decorates its children with mouse and touch coordinates relative to itself.
https://ethanselzer.github.io/react-cursor-position
MIT License
143 stars 35 forks source link

Mouseenter not triggering on modal close #13

Closed heyellieday closed 6 years ago

heyellieday commented 6 years ago

Thanks for your work on this library. It's been very useful so far!

Anyway, I'm developing a react app that is using react-cursor-position to capture the cursor position for a given div and whether or not the cursor is positioned inside a div.

Sadly, there is an issue with the mouseEnter event not being triggered on close of a custom modal div. Specifically, when the mouse is positioned over an element that contains a ReactCursorPosition component and the modal is closed, typically via a click, the mouseEnter event does not trigger upon the cursor "entering" the element. As I am relying on the isActive prop to be true when the element is in a hover state, this is problematic as isActive is set to true from the onMouseEnter function being called.

In my initial investigation into this issue, adding a mouseOver event listener that calls onMouseEnter
instead of onMouseEnter on the same div where the mouseEnter listener was present, fixes the issue, but it is not entirely clear why. I'm guessing it is because the cursor never actually "enters" the element when the modal closes, if "entering" means crossing into an element from its outer border. I also came across this explanation of the differences between mouseEnter and mouseOver, but it doesn't really clear much up.

Also, onMouseOver does trigger more frequently, so some check would have to be in place to make sure you aren't running the "onEnter" code more than once. It does work without such a check, but it doesn't make sense to call the code in onMouseEnter multiple times.

Is there a specific reason you are using onMouseEnter over onMouseOver? Either way, I'm hoping there is some solution for this issue. I can provide more details if needed and also make a PR with proposed changes if you think listening to the mouseOver event could work.

ethanselzer commented 6 years ago

@heyellieday - Thanks for creating this issue. I really appreciate the detail you provided in it!

The primary design goal of react-cursor-position is decoration of child components, which seems like a good fit withmouseenter because it does not bubble.

I don't know all your requirements, but I'm wondering if you might consider a custom solution. Here is a prototype that implements notification of cursor position and mouseover/mouseout. Please let me know your thoughts.

heyellieday commented 6 years ago

@ethanselzer, I'm glad I provided enough info. Thank you for your quick reply and code example, too!

After thinking about it some more, you're right that for this particular use of react-cursor-position, the position of the cursor is not relevant, so having a custom component that just tracks mouse over and mouse leave makes more sense.

There's still a usage of a react-cursor-position higher up in the component tree that stores horizontal position of these elements, so we should be able to track if a component is "active" in a simpler way. Thanks again for your advice!

ethanselzer commented 6 years ago

@heyellieday - I'm glad you found a good strategy! If you find react-cursor-position useful, please consider starring it on GitHub. Starring helps to grow the project, which benefits everyone.

ethanselzer commented 6 years ago

@heyellieday - I'm closing this for now, but please let me know if you have any further thoughts. Thanks again for opening the issue and for starring on GitHub. I really appreciate it!