I’m building a React application, where users can generate color gradients, but for some reason I’m having a hard time implementing a draggable Color Selector.

I’ve implemented dragging functionality by adding mouseup, mousedown, and mousemove event handlers, but I’m running into a bug: if you click and drag the Color Selector and then let go of the mouse when the cursor is not hovering directly over the element, the mouseup event is not fired.

To see this in action, open up console and look at the pressed variable output. The expected output is pressed: true when selected, pressed: false when the mouse is let go.

But instead, when you let go of the mouse outside the element, it’s stays stucked at pressed: true and can still be slid around even though your mouse is no longer pressed.

Does anyone have any ideas on how to solve this?

code: https://codesandbox.io/p/sandbox/upbeat-tesla-86jmwn