onMouseUp not working if you drag outside of the component

[jameschetwood]

I need to have 2 pieces of state. One updates in real time as you drag on the colour picker, and the other only updates when you release the drag (ie you've finished choosing).

This code works except when you drag the mouse out of the component. In that case color updates but colorFinal does not.

https://codesandbox.io/s/funny-wind-y65ivg?file=/src/App.js:0-555

import { useState } from "react";
import "./styles.css";
import { HexColorPicker } from "react-colorful";

export default function App() {
  const [color, setColor] = useState("#aabbcc");
  const [colorFinal, setColorFinal] = useState("#aabbcc");
  return (
    <div>
      <div style={{ background: color }}>Color</div>
      <div style={{ background: colorFinal }}>Color Final</div>
      <HexColorPicker
        color={color}
        onChange={setColor}
        onMouseUp={(e) => {
          setColorFinal(color);
        }}
      />
    </div>
  );
}

Screen recording of the issue: https://www.loom.com/share/0d4ad40582d64ccf94d0454e74d6fbe9

Is there an event that could be used instead of or as well as onMouseUp ?

[Space1nvader]

Hi, if you need still fix it, i have a stupid solution

Add new state
const [isSettingColor, setIsSettingColor] = useState(false);

Add mouseDown listener on color-picker component
onMouseDown={() => setIsSettingColor(true)}

And effect

  useEffect(() => {
    const changeColorHandler = () => {
        onChange(color);
    };

    if (color && isSettingColor) {
      window.addEventListener('mouseup', changeColorHandler);
    } else {
      window.removeEventListener('mouseup', changeColorHandler);
    }

    return () => {
      window.removeEventListener('mouseup', changeColorHandler);
    };
  }, [customColor, isSettingColor]);

If you have a better solution, I'd be grateful to see it.