e.preventDefault() inside passive event listener in mobile devices

[fsubal]

With "react-color": "^2.17.0"

In Chrome 71.0.3578.98, with devtools responsive mode, the following warning is emitted.

It look like React implicitly addEventListeners touchmove event as { passive: true }.

Since you should not fire e.preventDefault() in touchmove handler, which Saturation component is violating it.

react-color/src/components/common/Saturation.js

Lines 20 to 26 in 8bde391

	handleChange = (e) => {
	typeof this.props.onChange === 'function' && this.throttle(
	this.props.onChange,
	saturation.calculateChange(e, this.props.hsl, this.container),
	e,
	)
	}

Fundamentally it is caused by saturation.calculateChange(), so it seems this could be solved by

1. making .calculateChange not requiring Event object
2. not using Saturation.this._handleChange for onTouchmove, replacing to another event handler

[fsubal]

Also reproduced in https://casesandberg.github.io/react-color/

[casesandberg]

Hmm, this is an interesting case. I am going to look back through to see why preventDefault was added in the first place. We might be able to just remove it.

[glauger-petal]

Looks like this is a known issue with Chrome and React:
facebook/react#8968

[casesandberg]

I am going to go ahead and close this as it has to do with a specific version of React and not this package itself.