casesandberg / casesandberg/react-color

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

Open
#794 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.3k
Forks
920
PR merge metrics
No merged PRs in 30d

Description

## 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](https://codesandbox.io/s/react-color-16-fep2s?file=/src/App.js))

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](https://codesandbox.io/s/react-color-1614-clt1u?file=/src/App.js))

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

Contributor guide

Open the contributing guide

Research direction

Start with the ColorWrap component and its getDerivedStateFromProps method, then reproduce the pointer movement using the React 16 and React 16.15 CodeSandbox demos. Compare the derived state during vertical dragging near the saturation block's bottom edge; done means the pointer no longer jumps erratically without introducing regressions, while checking related pull request #791.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.