Bubble onSubmit/onReset behind a feature flag (#19333)

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

@@ -281,7 +281,7 @@ describe('ReactDOMEventListener', () => {
   // This is a special case for submit and reset events as they are listened on
   // at the element level and not the document.
   // @see https://github.com/facebook/react/pull/13462
-  it('should not receive submit events if native, interim DOM handler prevents it', () => {
+  it('should (or not) receive submit events if native, interim DOM handler prevents it', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
 
@@ -316,8 +316,13 @@ describe('ReactDOMEventListener', () => {
         }),
       );
 
-      expect(handleSubmit).toHaveBeenCalled();
-      expect(handleReset).toHaveBeenCalled();
+      if (gate(flags => flags.enableFormEventDelegation)) {
+        expect(handleSubmit).not.toHaveBeenCalled();
+        expect(handleReset).not.toHaveBeenCalled();
+      } else {
+        expect(handleSubmit).toHaveBeenCalled();
+        expect(handleReset).toHaveBeenCalled();
+      }
     } finally {
       document.body.removeChild(container);
     }

packages/react-dom/src/events/DOMModernPluginEventSystem.js

@@ -85,6 +85,7 @@ import getListener from './getListener';
 import {passiveBrowserEventsSupported} from './checkPassiveEvents';
 
 import {
+  enableFormEventDelegation,
   enableLegacyFBSupport,
   enableCreateEventHandleAPI,
   enableScopeAPI,
@@ -222,8 +223,6 @@ export const capturePhaseEvents: Set<DOMTopLevelEventType> = new Set([
   TOP_CANCEL,
   TOP_CLOSE,
   TOP_INVALID,
-  TOP_RESET,
-  TOP_SUBMIT,
   TOP_ABORT,
   TOP_CAN_PLAY,
   TOP_CAN_PLAY_THROUGH,
@@ -249,6 +248,11 @@ export const capturePhaseEvents: Set<DOMTopLevelEventType> = new Set([
   TOP_WAITING,
 ]);
 
+if (!enableFormEventDelegation) {
+  capturePhaseEvents.add(TOP_SUBMIT);
+  capturePhaseEvents.add(TOP_RESET);
+}
+
 if (enableCreateEventHandleAPI) {
   capturePhaseEvents.add(TOP_AFTER_BLUR);
 }

packages/shared/ReactFeatureFlags.js

@@ -127,3 +127,6 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 
 // Replacement for runWithPriority in React internals.
 export const decoupleUpdatePriorityFromScheduler = false;
+
+// Enables delegation for submit and reset events.
+export const enableFormEventDelegation = false;

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

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

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

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

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

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

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

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

packages/shared/forks/ReactFeatureFlags.testing.js

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

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

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

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

@@ -43,3 +43,5 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 // to __VARIANT__.
 export const enableTrustedTypesIntegration = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+
+export const enableFormEventDelegation = __VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

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