When dragging to select a color, dragging is disabled.

[ernest1010]

Chrome version: 96.0.4664.110（Official Build） （64 bit） react-color: 2.19.3

code: export class SketchColor extends React.Component { render() { return <SketchPicker /> } }

When dragging to select a color, dragging is disabled. Repeated operation, the probability of occurrence is still very high.

The site SketchPicker demo does not have this problem. I checked html element and found that saturation-white was not used Which version of react-color is used in the demo?

[NickersWeb]

@ernest1010 Had the same issue with latest version. The beta version works. I'm currently using "^3.0.0-beta.3"

[breczus]

Hi, i just try to use this package with old react lessons, where teacher uses classes. with functional components, u must do something like that to works:

import React from 'react';
import {ChromePicker} from 'react-colors'

function NewPaletteForm() {
const [background, setBackground] = React.useState('red');
<ChromePicker color={background} onChangeComplete={handleChangeComplete} />

[xiamengfan]

You can try adding a style to the component, like this：

function ColorPanel() {
    const [color, setColor] = useState({ r: 255,  g: 255 ,b: 255, a: 1 });
    const onChange = (color) => {
        setColor(color.rgb);
    }
    return (
        <div style={{ userSelect: 'none'}}>
            <ChromePicker color={color} onChange={onChange}></ChromePicker>
        </div>
    )
}

[iversonwool]

You can try adding a style to the component, like this：

function ColorPanel() {
    const [color, setColor] = useState({ r: 255,  g: 255 ,b: 255, a: 1 });
    const onChange = (color) => {
        setColor(color.rgb);
    }
    return (
        <div style={{ userSelect: 'none'}}>
            <ChromePicker color={color} onChange={onChange}></ChromePicker>
        </div>
    )
}

I try this, it doesn't work

[SaraVieira]

Maybe this helps someone

I was having this error and it was because I was using onChangeComplete instead of onChange

<SketchPicker
  color={value}
  onChange={(color: ColorResult) =>
    onChangeValue(stringifyRGBA(color.rgb))} 
/>

[benfogiel]

Maybe this helps someone

I was having this error and it was because I was using onChangeComplete instead of onChange

<SketchPicker
  color={value}
  onChange={(color: ColorResult) =>
    onChangeValue(stringifyRGBA(color.rgb))} 
/>

This one worked for me!

[uxderrick]

Maybe this helps someone

I was having this error and it was because I was using onChangeComplete instead of onChange

<SketchPicker
  color={value}
  onChange={(color: ColorResult) =>
    onChangeValue(stringifyRGBA(color.rgb))} 
/>

This worked for me! Thanks @SaraVieira