react-color icon indicating copy to clipboard operation
react-color copied to clipboard

ColorWrapped saturation block pointer jumps erratically in newer versions of React (16.3+)

Open hzhu opened this issue 4 years ago • 0 comments

Problem

In newer versions of React (16.3+), dragging the saturation block pointer (within a ColorWrap) vertically near the bottom causes the pointer to jump horizontally:

Expected behavior (CodeSandbox demo)

In this CodeSandbox, React v16 is used. Dragging the saturation block pointer vertically near the bottom doesn't cause the pointer to jump erratically.

Unexpected behavior (CodeSandbox demo)

In this CodeSandbox, React v16.15 is used. Dragging the saturation block pointer vertically near the bottom causes the pointer to jump erratically.

I'm not sure what is the root problem. But it seems to stem from the getDerivedStateFromProps static method. I looks like there is no

Potential solution

The getDerivedStateFromProps method seems to be deriving an inaccurate next state. By removing this completely, the ColorWrap works just fine with an accurate state — the saturation block would no longer jump around erratically. There appear to be no regressions.

Related pull request

#791

hzhu avatar Dec 10 '20 16:12 hzhu