useFetcher() submit doesn't work with an object of type FormData

What version of Remix are you using?

1.1.3

Steps to Reproduce

1. Create a Form component
2. onSubmit get the form element and const formData = new FormData(form);
3. Then add anything formData.set('hello', 'world');
4. Then fetcher.submit(formData)

And you’ll notice we never arrive in the action handler. If I pass the form element directly to submit, then it works as expected.

Expected Behavior

Since the submit function’s signature accepts a FormData object, I expect it to call my action handler.

Actual Behavior

Does nothing. No error. No logs. All I see is that the fetcher.state goes to submitting and then goes back to idle without doing anything.

[FrecksterGIT]

The action method is only called for POST requests. In your error report you use fetcher.submit(formData) which results in a GET-Request. Changing it to fetcher.submit(formData, { method: "post" }) should do the trick.

[Jaikant]

@silvenon understood! I shall probably wait for @kemicofa to provide more information. Just in case there are some boundary cases I didn’t cover in my repro.