@samitouri / QOS-React / commits / 64ddef44c6

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

This reverts commit e9721e14e4b8776c107afa3cdd7c6d664fe20c24.

Dan Abramov committed Aug 19, 2020 at 20:54 UTC 64ddef44c69a18038b1683e04c4558a72af1b91a
12 files changed +45 -14
packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+17 -6
@@ -712,12 +712,23 @@ describe('ReactDOMEventListener', () => {
712 bubbles: false,
713 }),
714 );
715 - expect(log).toEqual([
716 - ['capture', 'grand'],
717 - ['capture', 'parent'],
718 - ['capture', 'child'],
719 - ['bubble', 'child'],
720 - ]);
715 + if (gate(flags => flags.disableOnScrollBubbling)) {
716 + expect(log).toEqual([
717 + ['capture', 'grand'],
718 + ['capture', 'parent'],
719 + ['capture', 'child'],
720 + ['bubble', 'child'],
721 + ]);
722 + } else {
723 + expect(log).toEqual([
724 + ['capture', 'grand'],
725 + ['capture', 'parent'],
726 + ['capture', 'child'],
727 + ['bubble', 'child'],
728 + ['bubble', 'parent'],
729 + ['bubble', 'grand'],
730 + ]);
731 + }
732 } finally {
733 document.body.removeChild(container);
734 }
packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+6
@@ -1225,6 +1225,12 @@ describe('ReactDOMEventListener', () => {
1225 });
1226
1227 describe('non-bubbling events that do not bubble in React', () => {
1228 + // This test will fail outside of the no-bubbling flag
1229 + // because its bubbling emulation is currently broken.
1230 + // In particular, if the target itself doesn't have
1231 + // a handler, it will not emulate bubbling correctly.
1232 + // Instead of fixing this, we'll just turn this flag on.
1233 + // @gate disableOnScrollBubbling
1234 it('onScroll', () => {
1235 testNonBubblingEvent({
1236 type: 'div',
packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+13 -8
@@ -47,7 +47,10 @@ import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../EventSystemFlags';
47 import getEventCharCode from '../getEventCharCode';
48 import {IS_CAPTURE_PHASE} from '../EventSystemFlags';
49
50 -import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
50 +import {
51 + enableCreateEventHandleAPI,
52 + disableOnScrollBubbling,
53 +} from 'shared/ReactFeatureFlags';
54
55 function extractEvents(
56 dispatchQueue: DispatchQueue,
@@ -182,13 +185,15 @@ function extractEvents(
185 // In the past, React has always bubbled them, but this can be surprising.
186 // We're going to try aligning closer to the browser behavior by not bubbling
187 // them in React either. We'll start by not bubbling onScroll, and then expand.
185 - const accumulateTargetOnly =
186 - !inCapturePhase &&
187 - // TODO: ideally, we'd eventually add all events from
188 - // nonDelegatedEvents list in DOMPluginEventSystem.
189 - // Then we can remove this special list.
190 - // This is a breaking change that can wait until React 18.
191 - domEventName === 'scroll';
188 + let accumulateTargetOnly = false;
189 + if (disableOnScrollBubbling) {
190 + accumulateTargetOnly =
191 + !inCapturePhase &&
192 + // TODO: ideally, we'd eventually add all events from
193 + // nonDelegatedEvents list in DOMPluginEventSystem.
194 + // Then we can remove this special list.
195 + domEventName === 'scroll';
196 + }
197
198 accumulateSinglePhaseListeners(
199 targetInst,
packages/shared/ReactFeatureFlags.js
+1
@@ -135,3 +135,4 @@ export const enableDiscreteEventFlushingChange = false;
135
136 // https://github.com/facebook/react/pull/19654
137 export const enablePassiveEventIntervention = true;
138 +export const disableOnScrollBubbling = true;
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -44,6 +44,7 @@ export const enableComponentStackLocations = false;
44 export const enableLegacyFBSupport = false;
45 export const enableFilterEmptyStringAttributesDOM = false;
46 export const skipUnmountedBoundaries = false;
47 +export const disableOnScrollBubbling = true;
48
49 export const enableNewReconciler = false;
50 export const deferRenderPhaseUpdateToNextBatch = true;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -43,6 +43,7 @@ export const enableComponentStackLocations = false;
43 export const enableLegacyFBSupport = false;
44 export const enableFilterEmptyStringAttributesDOM = false;
45 export const skipUnmountedBoundaries = false;
46 +export const disableOnScrollBubbling = true;
47
48 export const enableNewReconciler = false;
49 export const deferRenderPhaseUpdateToNextBatch = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -43,6 +43,7 @@ export const enableComponentStackLocations = true;
43 export const enableLegacyFBSupport = false;
44 export const enableFilterEmptyStringAttributesDOM = false;
45 export const skipUnmountedBoundaries = false;
46 +export const disableOnScrollBubbling = true;
47
48 export const enableNewReconciler = false;
49 export const deferRenderPhaseUpdateToNextBatch = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -43,6 +43,7 @@ export const enableComponentStackLocations = true;
43 export const enableLegacyFBSupport = false;
44 export const enableFilterEmptyStringAttributesDOM = false;
45 export const skipUnmountedBoundaries = false;
46 +export const disableOnScrollBubbling = true;
47
48 export const enableNewReconciler = false;
49 export const deferRenderPhaseUpdateToNextBatch = true;
packages/shared/forks/ReactFeatureFlags.testing.js
+1
@@ -43,6 +43,7 @@ export const enableComponentStackLocations = true;
43 export const enableLegacyFBSupport = false;
44 export const enableFilterEmptyStringAttributesDOM = false;
45 export const skipUnmountedBoundaries = false;
46 +export const disableOnScrollBubbling = true;
47
48 export const enableNewReconciler = false;
49 export const deferRenderPhaseUpdateToNextBatch = true;
packages/shared/forks/ReactFeatureFlags.testing.www.js
+1
@@ -43,6 +43,7 @@ export const enableComponentStackLocations = true;
43 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
44 export const enableFilterEmptyStringAttributesDOM = false;
45 export const skipUnmountedBoundaries = __EXPERIMENTAL__;
46 +export const disableOnScrollBubbling = true;
47
48 export const enableNewReconciler = false;
49 export const deferRenderPhaseUpdateToNextBatch = true;
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+1
@@ -20,6 +20,7 @@ export const enableLegacyFBSupport = __VARIANT__;
20 export const decoupleUpdatePriorityFromScheduler = __VARIANT__;
21 export const skipUnmountedBoundaries = __VARIANT__;
22 export const enablePassiveEventIntervention = __VARIANT__;
23 +export const disableOnScrollBubbling = __VARIANT__;
24
25 // Enable this flag to help with concurrent mode debugging.
26 // It logs information to the console about React scheduling, rendering, and commit phases.
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -28,6 +28,7 @@ export const {
28 enableDebugTracing,
29 skipUnmountedBoundaries,
30 enablePassiveEventIntervention,
31 + disableOnScrollBubbling,
32 } = dynamicFeatureFlags;
33
34 // On WWW, __EXPERIMENTAL__ is used for a new modern build.