Keep onTouchStart, onTouchMove, and onWheel passive

facebook · Aug 19, 2020 · a6cf3d3 · a6cf3d3
1 parent 87b3e2d
commit a6cf3d3
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -342,6 +342,21 @@ export function listenToNativeEvent(
   if (domEventName === 'selectionchange') {
     target = (rootContainerElement: any).ownerDocument;
   }
+  if (isPassiveListener === undefined) {
+    // Browsers introduced an intervention, making these events
+    // passive by default on document. React doesn't bind them
+    // to document anymore, but changing this now would undo
+    // the performance wins from the change. So we emulate
+    // the existing behavior manually on the roots now.
+    // https://github.com/facebook/react/issues/19651
+    if (
+      domEventName === 'touchstart' ||
+      domEventName === 'touchmove' ||
+      domEventName === 'wheel'
+    ) {
+      isPassiveListener = true;
+    }
+  }
   // If the event can be delegated (or is capture phase), we can
   // register it to the root container. Otherwise, we should
   // register the event to the target element and mark it as
@@ -506,7 +521,7 @@ function addTrappedEventListener(
     };
   }
   if (isCapturePhaseListener) {
-    if (enableCreateEventHandleAPI && isPassiveListener !== undefined) {
+    if (isPassiveListener !== undefined) {
       unsubscribeListener = addEventCaptureListenerWithPassiveFlag(
         targetContainer,
         domEventName,
@@ -521,7 +536,7 @@ function addTrappedEventListener(
       );
     }
   } else {
-    if (enableCreateEventHandleAPI && isPassiveListener !== undefined) {
+    if (isPassiveListener !== undefined) {
       unsubscribeListener = addEventBubbleListenerWithPassiveFlag(
         targetContainer,
         domEventName,

diff --git a/packages/react-dom/src/events/checkPassiveEvents.js b/packages/react-dom/src/events/checkPassiveEvents.js
@@ -8,13 +8,12 @@
  */
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
-import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 
 export let passiveBrowserEventsSupported = false;
 
 // Check if browser support events with passive listeners
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
-if (enableCreateEventHandleAPI && canUseDOM) {
+if (canUseDOM) {
   try {
     const options = {};
     // $FlowFixMe: Ignore Flow complaining about needing a value

diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -504,5 +504,40 @@ describe('SimpleEventPlugin', function() {
 
       expect(onClick).toHaveBeenCalledTimes(0);
     });
+
+    it('registers passive handlers for events affected by the intervention', () => {
+      container = document.createElement('div');
+
+      const passiveEvents = [];
+      const nativeAddEventListener = container.addEventListener;
+      container.addEventListener = function(type, fn, options) {
+        if (options !== null && typeof options === 'object') {
+          if (options.passive) {
+            passiveEvents.push(type);
+          }
+        }
+        return nativeAddEventListener.apply(this, arguments);
+      };
+
+      ReactDOM.render(
+        <div
+          // Affected by the intervention:
+          // https://github.com/facebook/react/issues/19651
+          onTouchStart={() => {}}
+          onTouchMove={() => {}}
+          onWheel={() => {}}
+          // A few events that should be unaffected:
+          onClick={() => {}}
+          onScroll={() => {}}
+          onTouchEnd={() => {}}
+          onChange={() => {}}
+          onPointerDown={() => {}}
+          onPointerMove={() => {}}
+        />,
+        container,
+      );
+
+      expect(passiveEvents).toEqual(['touchstart', 'touchmove', 'wheel']);
+    });
   });
 });