This bug is browser-dependent.
Demo at https://github.com/svgpubs/react-mouse-bug
- Chrome Version 83.0.4103.97 (64 bit) on Ubuntu16 has bug
- Firefox 68.10.0esr (32 bit) on windows 10 has bug
- Firefox 78.0.2 (64 bit) on Ubuntu16 does NOT have bug
In the demo app: I have a box of 12 grey squares. When you drag over the wells, they turn blue. When you drag back over them, they return to grey, and so on. I am only using OnMouseDown, OnMouseEnter, and OnMouseUp react events on <div>s. A useState hook records which wells are blue at any given time, and a useRef hook keeps track of the mouse being down or up. Once the bug appears, the mouse ref loses track.
Can anyone explain what I am (or am not) doing to deserve such cross-browser variability and failures using mouse events in React? This is not the first time I've have trouble with what seem like simple mouse events. I don't know how to debug this type of problem. What do you look for if the mouse events simply stop firing for unknown reasons?
How can the app be modified so that it works in Chrome and FireFox?