ReactDOM: Fix missing form data when the submitter is outside the form (#28056)

Author: jupapios

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

@@ -92,6 +92,9 @@ function extractEvents(
       const temp = submitter.ownerDocument.createElement('input');
       temp.name = submitter.name;
       temp.value = submitter.value;
+      if (form.id) {
+        temp.setAttribute('form', form.id);
+      }
       (submitter.parentNode: any).insertBefore(temp, submitter);
       formData = new FormData(form);
       (temp.parentNode: any).removeChild(temp);

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

@@ -481,6 +481,7 @@ describe('ReactDOMForm', () => {
   it('can read the clicked button in the formdata event', async () => {
     const inputRef = React.createRef();
     const buttonRef = React.createRef();
+    const outsideButtonRef = React.createRef();
     let button;
     let title;
 
@@ -492,14 +493,27 @@ describe('ReactDOMForm', () => {
     const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(
-        <form action={action}>
-          <input type="text" name="title" defaultValue="hello" />
-          <input type="submit" name="button" value="save" />
-          <input type="submit" name="button" value="delete" ref={inputRef} />
-          <button name="button" value="edit" ref={buttonRef}>
-            Edit
+        <>
+          <form action={action}>
+            <input type="text" name="title" defaultValue="hello" />
+            <input type="submit" name="button" value="save" />
+            <input type="submit" name="button" value="delete" ref={inputRef} />
+            <button name="button" value="edit" ref={buttonRef}>
+              Edit
+            </button>
+          </form>
+          <form id="form" action={action}>
+            <input type="text" name="title" defaultValue="hello" />
+          </form>
+          <button
+            form="form"
+            name="button"
+            value="outside"
+            ref={outsideButtonRef}>
+            Button outside form
           </button>
-        </form>,
+          ,
+        </>,
       );
     });
 
@@ -520,6 +534,11 @@ describe('ReactDOMForm', () => {
     expect(button).toBe('edit');
     expect(title).toBe('hello');
 
+    await submit(outsideButtonRef.current);
+
+    expect(button).toBe('outside');
+    expect(title).toBe('hello');
+
     // Ensure that the type field got correctly restored
     expect(inputRef.current.getAttribute('type')).toBe('submit');
     expect(buttonRef.current.getAttribute('type')).toBe(null);