Keep onTouchStart, onTouchMove, and onWheel passive

[gaearon]

Resolves #19651.

This means that e.preventDefault() in them stays broken, like it was in React 16 due to Chrome's intervention, even though we've switched from putting them on the document to putting them on the root.

This makes React 17 match the React 16 behavior closer, as our goal is to reduce the breaking changes between them.

Note that this also means that any browsers that don't implement the intervention but do implement passive events will now get the post-intervention behavior:

This seems like technically it could be breaking if you target iOS Safari, however MDN may be out of date.

For example, this answer says iOS 11 aligned with Chrome.

So it should be ok.

Test Plan

Should be self-explanatory but I did some manual testing for onWheel. I'll test others before merge. Tested.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 31deb7f:

Sandbox	Source
React	Configuration

[sizebot]

Details of bundled changes.

Comparing: 87b3e2d...31deb7f

react-dom

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-dom.development.js	+0.2%	+0.2%	877.95 KB	879.96 KB	201 KB	201.48 KB	NODE_DEV
ReactDOMForked-prod.js	🔺+0.1%	🔺+0.1%	392.98 KB	393.28 KB	72.13 KB	72.19 KB	FB_WWW_PROD
react-dom-server.node.development.js	0.0%	-0.0%	137.08 KB	137.08 KB	36.38 KB	36.38 KB	NODE_DEV
react-dom.production.min.js	🔺+0.3%	🔺+0.3%	119.37 KB	119.74 KB	38.4 KB	38.53 KB	NODE_PROD
ReactDOMForked-profiling.js	+0.1%	+0.1%	406.55 KB	406.85 KB	74.59 KB	74.65 KB	FB_WWW_PROFILING
react-dom-server.browser.development.js	0.0%	-0.0%	143.16 KB	143.16 KB	36.58 KB	36.58 KB	UMD_DEV
react-dom-server.node.production.min.js	0.0%	-0.0%	20.2 KB	20.2 KB	7.58 KB	7.58 KB	NODE_PROD
react-dom-test-utils.production.min.js	0.0%	-0.0%	12.9 KB	12.9 KB	5.05 KB	5.05 KB	UMD_PROD
ReactDOMTesting-dev.js	+0.1%	+0.1%	950.36 KB	950.91 KB	212.88 KB	213.06 KB	FB_WWW_DEV
ReactDOMTesting-prod.js	0.0%	🔺+0.1%	392.93 KB	393.1 KB	73.52 KB	73.56 KB	FB_WWW_PROD
react-dom-test-utils.production.min.js	0.0%	-0.0%	12.73 KB	12.73 KB	4.97 KB	4.97 KB	NODE_PROD
ReactTestUtils-dev.js	+0.2%	+0.1%	55.32 KB	55.41 KB	15.52 KB	15.54 KB	FB_WWW_DEV
react-dom.development.js	+0.2%	+0.2%	922.37 KB	924.48 KB	203.47 KB	203.94 KB	UMD_DEV
react-dom.production.min.js	🔺+0.3%	🔺+0.4%	119.33 KB	119.7 KB	39.04 KB	39.2 KB	UMD_PROD
react-dom.profiling.min.js	+0.3%	+0.3%	123.23 KB	123.6 KB	40.29 KB	40.43 KB	UMD_PROFILING
ReactDOMForked-dev.js	+0.1%	+0.1%	993.37 KB	994.04 KB	219.97 KB	220.16 KB	FB_WWW_DEV
react-dom.profiling.min.js	+0.3%	+0.3%	123.44 KB	123.81 KB	39.65 KB	39.78 KB	NODE_PROFILING
react-dom-server.browser.production.min.js	0.0%	-0.0%	19.88 KB	19.88 KB	7.46 KB	7.46 KB	UMD_PROD
ReactDOM-dev.js	+0.1%	+0.1%	986.39 KB	987.07 KB	219.1 KB	219.28 KB	FB_WWW_DEV
ReactDOM-prod.js	🔺+0.1%	🔺+0.1%	389.46 KB	389.76 KB	71.44 KB	71.5 KB	FB_WWW_PROD
react-dom-server.browser.development.js	0.0%	-0.0%	135.81 KB	135.81 KB	36.13 KB	36.13 KB	NODE_DEV
ReactDOM-profiling.js	+0.1%	+0.1%	402.59 KB	402.89 KB	73.84 KB	73.9 KB	FB_WWW_PROFILING
react-dom-server.browser.production.min.js	0.0%	-0.0%	19.78 KB	19.78 KB	7.42 KB	7.42 KB	NODE_PROD
ReactDOMServer-dev.js	+0.1%	0.0%	147.01 KB	147.1 KB	37.33 KB	37.35 KB	FB_WWW_DEV
ReactDOMServer-prod.js	0.0%	0.0%	47.3 KB	47.3 KB	11.04 KB	11.04 KB	FB_WWW_PROD
react-dom-test-utils.development.js	0.0%	-0.0%	66.02 KB	66.02 KB	18.21 KB	18.21 KB	UMD_DEV

ReactDOM: size: 0.0%, gzip: -0.0%

Size changes (stable)

Generated by 🚫 dangerJS against 31deb7f

[sizebot]

Details of bundled changes.

Comparing: 87b3e2d...31deb7f

react-dom

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-dom.development.js	+0.2%	+0.2%	913.71 KB	915.72 KB	207.53 KB	208 KB	NODE_DEV
ReactDOMForked-prod.js	🔺+0.1%	🔺+0.1%	381.83 KB	382.13 KB	70.38 KB	70.44 KB	FB_WWW_PROD
react-dom-server.node.development.js	0.0%	-0.0%	138.59 KB	138.59 KB	36.6 KB	36.6 KB	NODE_DEV
react-dom.production.min.js	🔺+0.3%	🔺+0.3%	123.98 KB	124.34 KB	39.78 KB	39.89 KB	NODE_PROD
ReactDOMForked-profiling.js	+0.1%	+0.1%	395.36 KB	395.66 KB	72.86 KB	72.92 KB	FB_WWW_PROFILING
react-dom-server.browser.development.js	0.0%	-0.0%	144.75 KB	144.75 KB	36.78 KB	36.78 KB	UMD_DEV
react-dom-server.node.production.min.js	0.0%	-0.0%	20.66 KB	20.66 KB	7.65 KB	7.65 KB	NODE_PROD
react-dom-test-utils.production.min.js	0.0%	-0.0%	12.91 KB	12.91 KB	5.06 KB	5.06 KB	UMD_PROD
ReactDOMTesting-dev.js	+0.1%	+0.1%	922.3 KB	922.85 KB	207.38 KB	207.54 KB	FB_WWW_DEV
ReactDOMTesting-prod.js	0.0%	0.0%	380.3 KB	380.47 KB	71.46 KB	71.48 KB	FB_WWW_PROD
react-dom-unstable-fizz.node.development.js	0.0%	+0.1%	5.52 KB	5.52 KB	1.84 KB	1.84 KB	NODE_DEV
react-dom-test-utils.production.min.js	0.0%	-0.0%	12.74 KB	12.74 KB	4.98 KB	4.98 KB	NODE_PROD
react-dom-unstable-fizz.browser.development.js	0.0%	-0.1%	5.25 KB	5.25 KB	1.78 KB	1.78 KB	UMD_DEV
react-dom-unstable-fizz.node.production.min.js	0.0%	-0.1%	1.17 KB	1.17 KB	667 B	666 B	NODE_PROD
ReactTestUtils-dev.js	+0.2%	+0.1%	55.32 KB	55.41 KB	15.52 KB	15.54 KB	FB_WWW_DEV
react-dom.development.js	+0.2%	+0.2%	959.89 KB	962 KB	210.1 KB	210.58 KB	UMD_DEV
react-dom-unstable-fizz.browser.production.min.js	0.0%	-0.3%	1.01 KB	1.01 KB	617 B	615 B	NODE_PROD
react-dom.production.min.js	🔺+0.3%	🔺+0.4%	123.88 KB	124.24 KB	40.48 KB	40.63 KB	UMD_PROD
react-dom.profiling.min.js	+0.3%	+0.4%	129.12 KB	129.49 KB	42.1 KB	42.25 KB	UMD_PROFILING
ReactDOMForked-dev.js	+0.1%	+0.1%	967.87 KB	968.54 KB	215.22 KB	215.41 KB	FB_WWW_DEV
react-dom.profiling.min.js	+0.3%	+0.3%	129.41 KB	129.78 KB	41.38 KB	41.5 KB	NODE_PROFILING
ReactDOM-dev.js	+0.1%	+0.1%	960.9 KB	961.57 KB	214.43 KB	214.62 KB	FB_WWW_DEV
ReactDOM-prod.js	🔺+0.1%	🔺+0.1%	378.31 KB	378.61 KB	69.75 KB	69.81 KB	FB_WWW_PROD
react-dom-server.browser.development.js	0.0%	-0.0%	137.32 KB	137.32 KB	36.34 KB	36.34 KB	NODE_DEV
ReactDOM-profiling.js	+0.1%	+0.1%	391.39 KB	391.69 KB	72.15 KB	72.2 KB	FB_WWW_PROFILING
ReactDOMServer-dev.js	+0.1%	0.0%	142.98 KB	143.06 KB	36.33 KB	36.35 KB	FB_WWW_DEV
react-dom-test-utils.development.js	0.0%	-0.0%	66.03 KB	66.03 KB	18.22 KB	18.21 KB	UMD_DEV

ReactDOM: size: 0.0%, gzip: -0.0%

Size changes (experimental)

Generated by 🚫 dangerJS against 31deb7f

[gaearon]

Seems like it might be risky in WWW in case we rely on old behavior. I'll put it behind a flag but set it on in open source.

[gaearon]

I put it behind a flag in WWW but left it enabled in open source.

[trueadm]

What about pointer events?

[gaearon]

I don't think they're relevant here? Chrome doesn't print anything if you e.preventDefault() pointerdown or pointermove. And it doesn't seem like pointer events ever respected it for that purpose (they use CSS touch-action instead). All of the existing documentation about the intervention only refers to touch and wheel events. The intervention blog post also implies pointer events don't suffer from this.

[trueadm]

@gaearon Ah okay. Thanks for looking into it! :)

[trueadm]

We should also follow up with a test and check that the below works as expected (it should do, as we check if isPassiveListener is undefined first) and also so we don't accidently regress it in the future:

const setClick = ReactDOM.unstable_createEventHandle('touchstart', {passive: false});

function Component() {
  const ref = useRef(null);

  useEffect(() => {
    return setClick(ref.current, e => e.preventDefault());
  });

  return <button ref={ref}></button>
}

[koba04]

@trueadm I've created a PR to add a test based on your comment. #19658