React-color: Sketch picker v2 and v3, keeps updating color when mousemove

[UXDart]

Hi! for some reason, I tried on last v2 on npm and last v3 on npm, and after I show the Sketch picker, after the click on a color on the saturation component, on mousemove the color changes all the time, is like mouseup is not firing so it thinks it is dragging the color. I think it must be the complex UI I have, but what it could be? what can I try to debug it? any tips? I google a lot and search for issues but couldn't find any solution.

Thanks

[UXDart]

I made a copy of everything local and I'm debugging... I found that is calling handleMouseUp and then unbindEventListeners, but the removeEventListener is not removing the handle. testing on Saturation component.

[UXDart]

if I use jquery it works ok, on() off(), like $(window).on('mousemove', this.handleChange);... no idea what is the difference...

[JustAHate]

I have the same issue. Hope for solution or workaround.

[UXDart]

I found the reason... it was a package for React that takes care of capture events, I removed it and it worked

[JustAHate]

Thanks, that really helped. I had the similar issue with package that blocked mouseup events.

[mrcoles]

I just encountered this too. More generically, if a parent element of the color picker does event.stopPropagation() on 'mouseUp' events, then it never knows that you lifted the mouse and if it does the same for 'mouseMove' events, then it will never know you moved the mouse.

I was wondering why it had to listen on window instead of inside the component, but it makes sense if you look at the code: https://github.com/casesandberg/react-color/blob/8bde391b44d9336bccae91757b748b32d91bb1cd/src/components/common/Alpha.js#L17

[iansullivan88]

For me, mouseup wasn't firing because the browser was interpretting my action as a drag. To fix it, I passed the following object into the styles property of ChromePicker

{
  default: {
    Saturation: {
      pointer: {
        "pointer-events": "none"
      }
    }
  }
}