React-color: Cannot Change Color

[damnitrahul]

The color choosing circle and the sliders are fixed and do not move with upon click and drag. Hence its does not allow us to choose a color in the latest version 2.18.0.

Everything works fine on rolling back to 2.17.3.

[vkarakoulakoglou]

I have the same issue. The "onChange", "onChangeComplete", "onAccept" events work in the background as expected, however the UI is "frozen" ie the sliders and the buttons have no visible effect when interacting with them.

I've also tried the 2.17.3, but I had the same problem. Have you found any solution/workaround for this?

[somyarocketium]

@vkarakoulakoglou make sure in package.json you have the exact version "2.17.3" and not "^2.17.3", tried it worked for me , but looking fwd for a resolution in latest version

[vkarakoulakoglou]

@somyarocketium thanks for your reply. I already had it like that, however I also had wrongly set the onChange method so it was never updating its value. I guess the fix for the latest version would be out soon. cheers

[maniac0s]

I am here sitting the whole day trying to get that color picker into a react-draggable component and it doesn't work. I thought it was draggable messing with the events on the color picker then I tried to put it into a modal from the reactstrap library and had the same problem. It just doesn't allow me to move the selector circle nor sliders, buttons however are clickable (but won't change the color screen). Had I just looked here because I already had the colorpicker working a few weeks ago just wanted to move it into a draggable.

Is this really a bug in the version? I have installed

• [email protected]

Edit: Reverted to 2.17.2 and it works...

[Matrixbirds]

I got same issue...

[navicstein]

Am also experiencing this issue

[SlehMas]

I solved the issue by installing the exact version 2.17.3 (ran nom i [email protected]) just like @somyarocketium said

[wntechs]

I had the same issue with latest version and solved it by defining default color property.
<HuePicker color={this.state.background} onChangeComplete={ this.handleChangeComplete }/>

[kylekirkby]

I had the same issue with latest version and solved it by defining default color property.
<HuePicker color={this.state.background} onChangeComplete={ this.handleChangeComplete }/>

This didn't solve my issue. I'm using the ChromePicker and the only thing that solved the issue for me was reverting to 2.17.2 as @somyarocketium mentions. Thank you!

Maintainers - any idea what is going on in the latest version?

BR,

Kyle

[rffaguiar]

Same issue as @kylekirkby: using ChromePicker and the ui circle doesn't move even though the color is updated (console.log(color) on onChangeComplete)

[webdevfrancisco]

I had the same issue with latest version and solved it by defining default color property.
<HuePicker color={this.state.background} onChangeComplete={ this.handleChangeComplete }/>

This didn't solve my issue. I'm using the ChromePicker and the only thing that solved the issue for me was reverting to 2.17.2 as @somyarocketium mentions. Thank you!

Maintainers - any idea what is going on in the latest version?

BR,

Kyle

same here! rolling back to 2.17.3 worked for me.

[listao]

Any updates on this issue? I'm running into the same issue with the sliders not updating their position. As the other say the color value does update accordingly on onChange and onChangeComplete.

I even copied the exact class for the ButtonExample and it doesn't work, but when I copied and pasted on https://codesandbox.io/, it seem to work just fine...

The rollback didn't resolve the issue for me.

Edit: Tried again on Code Sandbox and it doesn't seem to be working.
https://codesandbox.io/s/vigilant-ride-0khfn?file=/src/App.js

[neighborhood999]

<EditableInput /> same as this issue, ref link

[xoxwgys56]

<SliderPicker /> works on 2.17.3, past version was ^2.18.0

[casesandberg]

This has been fixed and will be release in [email protected]

[nsthorat]

Seeing this in 2.18.1.

[hke-cheng]

The bug still here.

[aleafo]

still 2.18.1

[greeneman42]

If you're still having this issue, remember that the components are controlled only. You must supply a hex color string via the color prop that gets updated via onChange or onChangeEnd.

Here's a working example
https://codesandbox.io/s/react-color-picker-test-iuyk9

I will admit though, I did struggle for a while with that same code not working even though it was setup the same way. Maybe a codesandbox thing...

[KPChakravarthy]

@casesandberg I can confirm that this issue still exists in 2.18.1 and rolling back to 2.17.3 fixes it. Can you please reopen this ticket?

Edit: Sorry for the false alarm, fixed after changing the color props.

[bmeunier1974]

Also seeing the bug in 2.18.1 Fixed by rolling back to version 2.17.3.

Edit: Fixed after making sure the color props gets update on change.

[jacob-alxndr]

color prop value needs to be updated onChange.
2.18.1 works as long as that value is being updated.

[jasoncui]

Was experiencing this issue with latest version using React Hooks. Found a solution by defining a separate color state, and updating this value onChangeComplete. The component then takes the color state as a prop.

[eliasbobadilla]

I had the same issue with Slider Picker but it' fix adding a default color: <SliderPicker color={current.color} />

[saba-bg]

@vkarakoulakoglou make sure in package.json you have the exact version "2.17.3" and not "^2.17.3", tried it worked for me , but looking fwd for a resolution in latest version

works for me thanks

[ImAbhishekTomar]

Same issue facing with ("react-color": "^2.19.3",) this version.

I have already tried.

1. <ChromePicker color={item.color} onChange={(e) => handlerOnColorChange(e, item)} />
2. <ChromePicker  onChange={(e) => handlerOnColorChange(e, item)} />
3. <ChromePicker  onChangeComplete={(e) => handlerOnColorChange(e, item)} />
4. <SketchPicker  onChangeComplete={(e) => handlerOnColorChange(e, item)} />
5. <ChromePicker />
6. <SketchPicker />

[tilnea]

Same issue facing with ("react-color": "^2.19.3",) this version.

I have already tried.

1. <ChromePicker color={item.color} onChange={(e) => handlerOnColorChange(e, item)} />
2. <ChromePicker  onChange={(e) => handlerOnColorChange(e, item)} />
3. <ChromePicker  onChangeComplete={(e) => handlerOnColorChange(e, item)} />
4. <SketchPicker  onChangeComplete={(e) => handlerOnColorChange(e, item)} />
5. <ChromePicker />
6. <SketchPicker />

I'm experiencing the same problem with 2.19.3

[SkynI25]

Same issue facing with ("react-color": "^2.19.3",) this version.
I have already tried.

1. <ChromePicker color={item.color} onChange={(e) => handlerOnColorChange(e, item)} />
2. <ChromePicker  onChange={(e) => handlerOnColorChange(e, item)} />
3. <ChromePicker  onChangeComplete={(e) => handlerOnColorChange(e, item)} />
4. <SketchPicker  onChangeComplete={(e) => handlerOnColorChange(e, item)} />
5. <ChromePicker />
6. <SketchPicker />

I'm experiencing the same problem with 2.19.3

Have same issue here too.

[syanenko]

Confirm this issue with version 2.19.3 on Win7, Chrome 88.0.4324.150

[BenBrostoff]

Also had the same issue on 2.19.3, OSX, Chrome 88.0.4324.182 and also Firefox 85.0 (also confirmed rolling back to 2.17.3 resolved).

[akashchokshi]

Version: ^2.19.3
Working code snippet:

const [color, setColor] = useState('#ffffff'); // define a state for the color prop

// setState when onChange event triggered
const handleChange = (color: any) => {
    setColor(color.hex);
  };

<SketchPicker
          color={color}
          onChange={handleChange}
          onChangeComplete={handleChangeComplete}
        />