[react-dom] Include submitter in submit events

packages/react-dom-bindings/src/events/SyntheticEvent.js

@@ -522,6 +522,17 @@ export const SyntheticPointerEvent: $FlowFixMe = createSyntheticEvent(
   PointerEventInterface,
 );
 
+/**
+ * @interface SubmitEvent
+ * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-submitevent-interface
+ */
+const SubmitEventInterface: EventInterfaceType = {
+  ...EventInterface,
+  submitter: 0,
+};
+export const SyntheticSubmitEvent: $FlowFixMe =
+  createSyntheticEvent(SubmitEventInterface);
+
 /**
  * @interface TouchEvent
  * @see http://www.w3.org/TR/touch-events/

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

@@ -27,6 +27,7 @@ import {
   SyntheticWheelEvent,
   SyntheticClipboardEvent,
   SyntheticPointerEvent,
+  SyntheticSubmitEvent,
   SyntheticToggleEvent,
 } from '../../events/SyntheticEvent';
 
@@ -162,6 +163,9 @@ function extractEvents(
     case 'pointerup':
       SyntheticEventCtor = SyntheticPointerEvent;
       break;
+    case 'submit':
+      SyntheticEventCtor = SyntheticSubmitEvent;
+      break;
     case 'toggle':
     case 'beforetoggle':
       // MDN claims <details> should not receive ToggleEvent contradicting the spec: https://html.spec.whatwg.org/multipage/indices.html#event-toggle

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

@@ -672,9 +672,10 @@ describe('ReactDOMEventListener', () => {
         reactEventType: 'submit',
         nativeEvent: 'submit',
         dispatch(node) {
-          const e = new Event('submit', {
+          const e = new SubmitEvent('submit', {
             bubbles: true,
             cancelable: true,
+            submitter: null,
           });
           node.dispatchEvent(e);
         },

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

@@ -591,4 +591,36 @@ describe('SimpleEventPlugin', function () {
       );
     });
   });
+
+  it('includes the submitter in submit events', async function () {
+    container = document.createElement('div');
+
+    const onSubmit = jest.fn(event => {
+      event.preventDefault();
+    });
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <form onSubmit={onSubmit}>
+          <button type="submit" id="submitter">
+            Submit
+          </button>
+        </form>,
+      );
+    });
+
+    const submitter = container.querySelector('#submitter');
+    const submitEvent = new SubmitEvent('submit', {
+      bubbles: true,
+      cancelable: true,
+      submitter: submitter,
+    });
+    await act(() => {
+      submitter.dispatchEvent(submitEvent);
+    });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    const event = onSubmit.mock.calls[0][0];
+    expect(event.submitter).toBe(submitter);
+  });
 });