Revert "Remove onScroll bubbling flag (#19535)" (#19655)

This reverts commit e9721e1.

Author: gaearon

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

@@ -712,12 +712,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);
 }

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

@@ -1225,6 +1225,12 @@ describe('ReactDOMEventListener', () => {
 });
 
 describe('non-bubbling events that do not bubble in React',()=>{
+// This test will fail outside of the no-bubbling flag
+// because its bubbling emulation is currently broken.
+// In particular, if the target itself doesn't have
+// a handler, it will not emulate bubbling correctly.
+// Instead of fixing this, we'll just turn this flag on.
+// @gate disableOnScrollBubbling
 it('onScroll',()=>{
 testNonBubblingEvent({
 type: 'div',

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

@@ -47,7 +47,10 @@ import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../EventSystemFlags';
 importgetEventCharCodefrom'../getEventCharCode';
 import{IS_CAPTURE_PHASE}from'../EventSystemFlags';
 
-import{enableCreateEventHandleAPI}from'shared/ReactFeatureFlags';
+import{
+enableCreateEventHandleAPI,
+disableOnScrollBubbling,
+}from'shared/ReactFeatureFlags';
 
 functionextractEvents(
 dispatchQueue: DispatchQueue,
@@ -182,13 +185,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.
-constaccumulateTargetOnly=
-!inCapturePhase&&
-// TODO: ideally, we'd eventually add all events from
-// nonDelegatedEvents list in DOMPluginEventSystem.
-// Then we can remove this special list.
-// This is a breaking change that can wait until React 18.
-domEventName==='scroll';
+letaccumulateTargetOnly=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.
+domEventName==='scroll';
+}
 
 accumulateSinglePhaseListeners(
 targetInst,

packages/shared/ReactFeatureFlags.js

@@ -135,3 +135,4 @@ export const enableDiscreteEventFlushingChange = false;
 
 // https://github.com/facebook/react/pull/19654
 exportconstenablePassiveEventIntervention=true;
+exportconstdisableOnScrollBubbling=true;

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

@@ -44,6 +44,7 @@ export const enableComponentStackLocations = false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableFilterEmptyStringAttributesDOM=false;
 exportconstskipUnmountedBoundaries=false;
+exportconstdisableOnScrollBubbling=true;
 
 exportconstenableNewReconciler=false;
 exportconstdeferRenderPhaseUpdateToNextBatch=true;

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

@@ -43,6 +43,7 @@ export const enableComponentStackLocations = false;
 exportconstenableLegacyFBSupport=false;
 exportconstenableFilterEmptyStringAttributesDOM=false;
 exportconstskipUnmountedBoundaries=false;
+exportconstdisableOnScrollBubbling=true;
 
 exportconstenableNewReconciler=false;
 exportconstdeferRenderPhaseUpdateToNextBatch=true;

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

@@ -43,6 +43,7 @@ export const enableComponentStackLocations = true;
 exportconstenableLegacyFBSupport=false;
 exportconstenableFilterEmptyStringAttributesDOM=false;
 exportconstskipUnmountedBoundaries=false;
+exportconstdisableOnScrollBubbling=true;
 
 exportconstenableNewReconciler=false;
 exportconstdeferRenderPhaseUpdateToNextBatch=true;

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

@@ -43,6 +43,7 @@ export const enableComponentStackLocations = true;
 exportconstenableLegacyFBSupport=false;
 exportconstenableFilterEmptyStringAttributesDOM=false;
 exportconstskipUnmountedBoundaries=false;
+exportconstdisableOnScrollBubbling=true;
 
 exportconstenableNewReconciler=false;
 exportconstdeferRenderPhaseUpdateToNextBatch=true;

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -43,6 +43,7 @@ export const enableComponentStackLocations = true;
 exportconstenableLegacyFBSupport=false;
 exportconstenableFilterEmptyStringAttributesDOM=false;
 exportconstskipUnmountedBoundaries=false;
+exportconstdisableOnScrollBubbling=true;
 
 exportconstenableNewReconciler=false;
 exportconstdeferRenderPhaseUpdateToNextBatch=true;

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

@@ -43,6 +43,7 @@ export const enableComponentStackLocations = true;
 exportconstenableLegacyFBSupport=!__EXPERIMENTAL__;
 exportconstenableFilterEmptyStringAttributesDOM=false;
 exportconstskipUnmountedBoundaries=__EXPERIMENTAL__;
+exportconstdisableOnScrollBubbling=true;
 
 exportconstenableNewReconciler=false;
 exportconstdeferRenderPhaseUpdateToNextBatch=true;

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

@@ -20,6 +20,7 @@ export const enableLegacyFBSupport = __VARIANT__;
 exportconstdecoupleUpdatePriorityFromScheduler=__VARIANT__;
 exportconstskipUnmountedBoundaries=__VARIANT__;
 exportconstenablePassiveEventIntervention=__VARIANT__;
+exportconstdisableOnScrollBubbling=__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

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