Sketch Picker does not reflect color change on click nor drag

[TejaReddy7]

Hi I am unable to pick color and values doesn't change, I am attaching code snippet and image, this bug raised recently using react 16.12.0 version.

onComplete = (param) => { const hexVal = param.hex || param.target.value; this.props.brandingColor.originalHexColorCode = this.props.brandingColor.hexColorCode; this.props.brandingColor.hexColorCode = hexVal; this.setState({ color: param.rgb }); this.props.updateColor(this.props.colors, this.props.brandingColor); };

SketchPicker color={this.state.color} onChangeComplete={this.onComplete} disableAlpha={true} presetColors={this.getHexValues()} />

[ahoys]

I'm having the same issue with ChromePicker. React 16.13.1

{isOpen ? <ChromePicker color={value} onChange={handleChange} /> : null}

[watcher00090]

I'm having the same issue, unfortunately. React 16.13.1

[zehawki]

Same here. React 16.13.1

Edit- ok, it works in controlled mode, so work done for now.

[m-rojen]

I am having same problem. Is this solved? React 17.0.2 and I am using React Hooks.

[ericjeansmith]

I had the same issue. The color picker has to be repainted based on a new color. Use a state to do that :

  const [sketchPickerColor, setSketchPickerColor] = useState<RGBColor>({
        r: 241,
        g: 112,
        b: 19,
        a: 1,
    });

    return (
            <SketchPicker
                onChange={(color) => {
                    setSketchPickerColor(color.rgb);
                }}
                color={sketchPickerColor}
            />
    )