[Bug]: Form submit missing input in request.formData() when submitting button is rendered outside form

[derekr]

Which Remix packages are impacted?

• remix (Remix core)
• create-remix
• @remix-run/architect
• @remix-run/cloudflare-workers
• @remix-run/dev
• @remix-run/express
• @remix-run/netlify
• @remix-run/node
• @remix-run/react
• @remix-run/serve
• @remix-run/server-runtime
• @remix-run/vercel

What version of Remix are you using?

1.1.3

What version of Node are you using? Minimum supported version is 14.

14.16.0

Steps to Reproduce

Render a button outside Form and target the Form via the form attribute. Click the button to submit form.

https://stackblitz.com/edit/node-trfzzj?file=app/routes/form.tsx
https://stackblitz.com/edit/node-trfzzj?file=app/routes/remix-form.tsx

import { json, useActionData, Form } from 'remix';

export const action = async ({ request }: { request: Request }) => {
  const data = await request.formData();
  // 👇🏻
  // { test: {} }
  // POST /remix-form?_data=routes%2Fremix-form 200 - - 4.500 ms
  console.log({ test: Object.fromEntries(data) });
  return json({ action: data.get('_action') });
};

export default function Index() {
  const data = useActionData();

  return (
    <>
      <h1>REMIX Form</h1>
      {data?.action && <div>{data.action}</div>}
      <button form="myForm" name="_action" value="someAction">
        Submit
      </button>
      <Form id="myForm" method="post" />
    </>
  );
}

Not clear if this is by design, but using a regular html form produces the expected behavior.

Expected Behavior

await request.formData().get('_action') should equal 'someAction'.

Actual Behavior

await request.formData().get('_action') equals null.

[machour]

Fixed in #1781, released in v1.2.0