Bubble onSubmit/onReset behind a feature flag (#19333)
Dan Abramov committed
Jul 13, 2020 at 17:17 UTC
26472c88979bb60746a47a660415df80775d25f9
11 files changed
+26
-5
packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+8
-3
@@ -281,7 +281,7 @@ describe('ReactDOMEventListener', () => {
281
// This is a special case for submit and reset events as they are listened on
282
// at the element level and not the document.
283
// @see https://github.com/facebook/react/pull/13462
284
- it('should not receive submit events if native, interim DOM handler prevents it', () => {
284
+ it('should (or not) receive submit events if native, interim DOM handler prevents it', () => {
285
const container = document.createElement('div');
286
document.body.appendChild(container);
287
@@ -316,8 +316,13 @@ describe('ReactDOMEventListener', () => {
316
}),
317
);
318
319
- expect(handleSubmit).toHaveBeenCalled();
320
- expect(handleReset).toHaveBeenCalled();
319
+ if (gate(flags => flags.enableFormEventDelegation)) {
320
+ expect(handleSubmit).not.toHaveBeenCalled();
321
+ expect(handleReset).not.toHaveBeenCalled();
322
+ } else {
323
+ expect(handleSubmit).toHaveBeenCalled();
324
+ expect(handleReset).toHaveBeenCalled();
325
+ }
326
} finally {
327
document.body.removeChild(container);
328
}
packages/react-dom/src/events/DOMModernPluginEventSystem.js
+6
-2
@@ -85,6 +85,7 @@ import getListener from './getListener';
85
import {passiveBrowserEventsSupported} from './checkPassiveEvents';
86
87
import {
88
+ enableFormEventDelegation,
89
enableLegacyFBSupport,
90
enableCreateEventHandleAPI,
91
enableScopeAPI,
@@ -222,8 +223,6 @@ export const capturePhaseEvents: Set<DOMTopLevelEventType> = new Set([
223
TOP_CANCEL,
224
TOP_CLOSE,
225
TOP_INVALID,
225
- TOP_RESET,
226
- TOP_SUBMIT,
226
TOP_ABORT,
227
TOP_CAN_PLAY,
228
TOP_CAN_PLAY_THROUGH,
@@ -249,6 +248,11 @@ export const capturePhaseEvents: Set<DOMTopLevelEventType> = new Set([
248
TOP_WAITING,
249
]);
250
251
+if (!enableFormEventDelegation) {
252
+ capturePhaseEvents.add(TOP_SUBMIT);
253
+ capturePhaseEvents.add(TOP_RESET);
254
+}
255
+
256
if (enableCreateEventHandleAPI) {
257
capturePhaseEvents.add(TOP_AFTER_BLUR);
258
}
packages/shared/ReactFeatureFlags.js
+3
@@ -127,3 +127,6 @@ export const deferRenderPhaseUpdateToNextBatch = true;
127
128
// Replacement for runWithPriority in React internals.
129
export const decoupleUpdatePriorityFromScheduler = false;
130
+
131
+// Enables delegation for submit and reset events.
132
+export const enableFormEventDelegation = false;
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -44,6 +44,7 @@ export const warnAboutSpreadingKeyToJSX = false;
44
export const enableComponentStackLocations = false;
45
export const enableLegacyFBSupport = false;
46
export const enableFilterEmptyStringAttributesDOM = false;
47
+export const enableFormEventDelegation = false;
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 warnAboutSpreadingKeyToJSX = false;
43
export const enableComponentStackLocations = false;
44
export const enableLegacyFBSupport = false;
45
export const enableFilterEmptyStringAttributesDOM = false;
46
+export const enableFormEventDelegation = false;
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 warnAboutSpreadingKeyToJSX = false;
43
export const enableComponentStackLocations = true;
44
export const enableLegacyFBSupport = false;
45
export const enableFilterEmptyStringAttributesDOM = false;
46
+export const enableFormEventDelegation = false;
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 warnAboutSpreadingKeyToJSX = false;
43
export const enableComponentStackLocations = true;
44
export const enableLegacyFBSupport = false;
45
export const enableFilterEmptyStringAttributesDOM = false;
46
+export const enableFormEventDelegation = false;
47
48
export const enableNewReconciler = false;
49
export const deferRenderPhaseUpdateToNextBatch = true;
packages/shared/forks/ReactFeatureFlags.testing.js
+1
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
43
export const enableComponentStackLocations = true;
44
export const enableLegacyFBSupport = false;
45
export const enableFilterEmptyStringAttributesDOM = false;
46
+export const enableFormEventDelegation = false;
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 warnAboutSpreadingKeyToJSX = false;
43
export const enableComponentStackLocations = true;
44
export const enableLegacyFBSupport = !__EXPERIMENTAL__;
45
export const enableFilterEmptyStringAttributesDOM = false;
46
+export const enableFormEventDelegation = false;
47
48
export const enableNewReconciler = false;
49
export const deferRenderPhaseUpdateToNextBatch = true;
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+2
@@ -43,3 +43,5 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
43
// to __VARIANT__.
44
export const enableTrustedTypesIntegration = false;
45
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
46
+
47
+export const enableFormEventDelegation = __VARIANT__;
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -27,6 +27,7 @@ export const {
27
decoupleUpdatePriorityFromScheduler,
28
enableDebugTracing,
29
enableSchedulingProfiler,
30
+ enableFormEventDelegation,
31
} = dynamicFeatureFlags;
32
33
// On WWW, __EXPERIMENTAL__ is used for a new modern build.