Cursor jumps to the bottom left corner when the color is pure black

casesandberg / react-color

:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

http://casesandberg.github.io/react-color/

MIT License

12.05k stars 922 forks source link

Cursor jumps to the bottom left corner when the color is pure black #867

Open wfortin opened 2 years ago

wfortin commented 2 years ago

When the user drags the cursor and hits #000000, the cursor jumps to the bottom left corner. This isn't wrong but makes the experience a little jarring. I would expect the position that the user picks to "stick".

See recording below of the react-color website: https://user-images.githubusercontent.com/2165256/188221494-26d6352f-946a-44b8-9334-ba52ad835090.mp4

See figma for example (notice that re-opening puts the cursor back to the bottom left, which I think is fine) https://user-images.githubusercontent.com/2165256/188221563-732b26f4-7a6c-45c8-bbf0-d43bfb70d168.mp4

ashgrover commented 2 years ago

I ran into this issue as well. This bug is in toState function of color.js. The issue occurs when v part of hsv is 0 then tinycolor library returns 0 for s part as well when color.toHsv() is called, so x-coordinate gets all messed up.

The fix is to not call color.toHsv() when v is 0 and return the incoming hsv values in data arg as it is.