fix(remix-react): fix <Form> submit to not break formMethod functionality

[kevlened]

Closes: #2162 and #3613 (supersedes both) – credits to @mdoury and @nrako

the <Form> component – unlike native <form> - does not respect the formmethod attribute set
on the submitter (the button submitting the form).

• Docs N/A
• Tests

Testing Strategy:

<Form method="post">
  <input name="eat" value="pizza" />
  <button type="submit"> Submit with GET </button>
</Form>
// should submit with a GET to `/?eat=pizza` but instead do a POST

See integration Bug-Report-Test via commit: 37b0140

test: failing test with <Form> not respecting formMethod 06333c1 Thu, 30 Jun 2022 00:33:15 +0200

Bug report integration test demonstrating how the `<Form>` component – 
unlike native `<form>` - does not respect the `formmethod` attribute set on
the submitter (the `<button>` submitting the form).

fix(remix-react): submit <Form> w/method set by submitter formmethod bfd1f88 Thu, 30 Jun 2022 00:32:22 +0200

Fix `<Form>` component by not passing the form's `method` into the
`options` when calling the `submit(target, options)` function (created with
the `useSubmit()` hook). This ensures that the option does not take 
precedence on any `formethod` set on the submitter which otherwise break the
`formmethod` functionality.

Since #3094 and #3094 the `<Form>` passes the "submitter" (if any) as the
`target` to the `submit(target, options)` (`useSubmitImpl`) which will
attempt to read the `formmethod`, `formaction` and `formenctype` attributes
on the target. Therefore, the responsability to infer which method should be
used should solely be on `useSubmitImpl` for the given
`target`.

Co-authored-by: Maxime Doury <[email protected]>

[changeset-bot]

🦋 Changeset detected

Latest commit: 4028ab5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
remix	Patch
@remix-run/react	Patch
create-remix	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/deno	Patch
@remix-run/dev	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/netlify	Patch
@remix-run/node	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/vercel	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[mcansh]

hm @kevlened, I just cloned this locally and checked out 06333c1, but all the tests passed for me

[kevlened]

That’s odd. I’m confident the functionality is broken, but I was able to work around it. I’ll create a repro example, then try to see why the tests aren’t catching it.

[evanstern]

I can also confirm that this issue still occurs for me in the current release.

[mian-muhammad]

I am facing the same issue in the current release.

[kiliman]

Until PR #4053 is merged in, you can use patch-package. It's literally a single line change. Copy this patch to your patches folder.

https://gist.github.com/kiliman/5a8dac031da8d545dc293fdcf82e9135

[mcansh]

Until PR #4053 is merged in, you can use patch-package. It's literally a single line change. Copy this patch to your patches folder.

https://gist.github.com/kiliman/5a8dac031da8d545dc293fdcf82e9135

there's two solutions to this problem, the one provided by this PR and this. the issue is due to defaulting Form to method=get, which we should, however we check for options.method (and friends) lower in the component where options.method is always set as it has a default value in Form. I still lean toward the fix in #4053, but I'll leave it up to discussion

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-c49bcaf-20221014 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!