react-colorful
react-colorful copied to clipboard
onMouseUp not working if you drag outside of the component
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
?