Fix missing form data when the submitter is outside the form

Fixes #27391

`form-associated elements` can be associated with `<form>`s anywhere in the document (even if the element is outside the `<form>`), and as with any submitter, the `name` and `value` are expected to be reflected in the final `FormData`.

Author: jupapios

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

@@ -92,6 +92,10 @@ function extractEvents(
       const temp = submitter.ownerDocument.createElement('input');
       temp.name = submitter.name;
       temp.value = submitter.value;
+      const isOutsideForm = !form.contains(submitter);
+      if (isOutsideForm) {
+        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

@@ -483,6 +483,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;
 
@@ -494,14 +495,24 @@ 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
+        <>
+          <button
+            form="form"
+            name="button"
+            value="outside"
+            ref={outsideButtonRef}>
+            Edit from outside
           </button>
-        </form>,
+          <form id="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>
+          ,
+        </>,
       );
     });
 
@@ -522,6 +533,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);