Put behind a flag

packages/react-dom/src/__tests__/ReactDOMEventListener-test.js

@@ -674,12 +674,23 @@ describe('ReactDOMEventListener', () => {
  bubbles: false,
  }),
  );
- expect(log).toEqual([
- ['capture', 'grand'],
- ['capture', 'parent'],
- ['capture', 'child'],
- ['bubble', 'child'],
- ]);
+ if (gate(flags => flags.disableOnScrollBubbling)) {
+ expect(log).toEqual([
+ ['capture', 'grand'],
+ ['capture', 'parent'],
+ ['capture', 'child'],
+ ['bubble', 'child'],
+ ]);
+ } else {
+ expect(log).toEqual([
+ ['capture', 'grand'],
+ ['capture', 'parent'],
+ ['capture', 'child'],
+ ['bubble', 'child'],
+ ['bubble', 'parent'],
+ ['bubble', 'grand'],
+ ]);
+ }
  } finally {
  document.body.removeChild(container);
  }
@@ -720,7 +731,6 @@ describe('ReactDOMEventListener', () => {
  bubbles: false,
  }),
  );
- //
  expect(log).toEqual([
  ['capture', 'grand'],
  ['capture', 'parent'],

packages/react-dom/src/events/plugins/SimpleEventPlugin.js

@@ -42,7 +42,10 @@ import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../EventSystemFlags';
 import getEventCharCode from '../getEventCharCode';
 import {IS_CAPTURE_PHASE} from '../EventSystemFlags';
 
-import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
+import {
+ enableCreateEventHandleAPI,
+ disableOnScrollBubbling,
+} from 'shared/ReactFeatureFlags';
 
 function extractEvents(
  dispatchQueue: DispatchQueue,
@@ -169,12 +172,15 @@ function extractEvents(
  // In the past, React has always bubbled them, but this can be surprising.
  // We're going to try aligning closer to the browser behavior by not bubbling
  // them in React either. We'll start by not bubbling onScroll, and then expand.
- const accumulateTargetOnly =
- !inCapturePhase &&
- // TODO: ideally, we'd eventually add all events from
- // nonDelegatedEvents list in DOMPluginEventSystem.
- // Then we can remove this special list.
- topLevelType === DOMTopLevelEventTypes.TOP_SCROLL;
+ let accumulateTargetOnly = false;
+ if (disableOnScrollBubbling) {
+ accumulateTargetOnly =
+ !inCapturePhase &&
+ // TODO: ideally, we'd eventually add all events from
+ // nonDelegatedEvents list in DOMPluginEventSystem.
+ // Then we can remove this special list.
+ topLevelType === DOMTopLevelEventTypes.TOP_SCROLL;
+ }
 
  accumulateSinglePhaseListeners(
  targetInst,

packages/shared/ReactFeatureFlags.js

@@ -128,3 +128,5 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 
 // Replacement for runWithPriority in React internals.
 export const decoupleUpdatePriorityFromScheduler = false;
+
+export const disableOnScrollBubbling = false;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -45,6 +45,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableOnScrollBubbling = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -44,6 +44,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableOnScrollBubbling = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -44,6 +44,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableOnScrollBubbling = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -44,6 +44,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableOnScrollBubbling = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -44,6 +44,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableOnScrollBubbling = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;

packages/shared/forks/ReactFeatureFlags.testing.www.js

@@ -44,6 +44,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableOnScrollBubbling = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -18,6 +18,7 @@ export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const decoupleUpdatePriorityFromScheduler = __VARIANT__;
+export const disableOnScrollBubbling = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.

packages/shared/forks/ReactFeatureFlags.www.js

@@ -27,6 +27,7 @@ export const {
  decoupleUpdatePriorityFromScheduler,
  enableDebugTracing,
  enableSchedulingProfilerComponentStacks,
+ disableOnScrollBubbling,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.