[Error] Unable to preventDefault inside passive event listener invocation.

[ajaypillay]

Hi, my browser's console keeps throwing this error, when all I have done is embedded <HexColorPicker color={color} onChange={setColor} /> in a functional component.

I tried setting touch-action: none to all parent divs up to body but the error is still being thrown. That being said, the color picker works fine on desktop and mobile, it's just that I'm not sure why this error is being thrown.

Any suggestions on remedying this?

This is a great library by the way! I avoided starting off with react-color because it seems outdated and has many open issues, while this is far more recent and modernized. Thank you for this.

[omgovich]

Hi! I guess the problem is in your setColor function.

I assume it looks like this:

const setColor = (e) => {
  e.preventDefault()
  console.log(e.target.value)
}

But react-colorful doesn't return an event object in the handler. So it has to be:

const setColor = (value) => {
  console.log(value)
}

Please check your event hander and let me know if the problem is there.

[ajaypillay]

Unfortunately my code is exactly as per the Readme.

import { HexColorPicker } from "react-colorful";
const Component = () => {
  const [color, setColor] = useState("#aabbcc");
  return <HexColorPicker color={color} onChange={setColor} />;
};

I've tested it on a blank page with no other components or touch events going on, and I can't seem to figure out why this is happening.

[omgovich]

Could you please provide an error stack trace? Just screenshot dev tools console for example.

[omgovich]

Not sure that error is inside of react-colorful since we don't use passive event listeners 🤔

[ajaypillay]

I'm trying to debug this a little further. I'm running Meteor, and I think something is conflicting with this.

This is the beginning of the line the error is thrown.

And this is specifically where the error is.

When I include the package/component itself, no error is thrown. This error is thrown only upon interacting with the component (as it should be).

[omgovich]

I'll try to create a Meteor app and run react-colorful there. Let you once I have some results.

[ajaypillay]

Thank you very much for the help.

[omgovich]

Hi! What version of react-dom do you use in your project?
Seems like it's relevant to this issue facebook/react#19651 and having 17.0.1+ should help.

[ajaypillay]

My react-dom version is 17.0.2, which is the latest version right now.

[omgovich]

Got it. Seems like the source of the problem is that touchstart event is now passive by default in the browsers.
Will try to find a workaround.

[ajaypillay]

Got it. Seems like the source of the problem is that touchstart event is now passive by default in the browsers.
Will try to find a workaround.

Interesting, thank you for the fix! Sincerely appreciated.

[omgovich]

Please try the new v5.2.2 and let me know the warning is still present.

[ajaypillay]

Just tested it and the warning isn't being thrown anymore, and it still works perfectly fine.

[omgovich]

Nice! Thanks for pointing out the bug and best of luck with your project)