[Bug]: fetcher.data is define when submitting via fetcher.submit but is undefined when submitting a fetcher.Form

[dlindahl]

What version of React Router are you using?

6.21.1

Steps to Reproduce

1. Create a fetcher

const fetcher = useFetcher()

2. Render the form

<fetcher.Form action="/route" method="POST">
<input name="new name"/>
<button type="submit">Submit</button>
</fetcher.Form>

3. Click the submit button to submit the form.

4. Wait for fetcher.state to transition from idle to submitting and back to idle.

5. Inspect fetcher.data and see that it is undefined.

6. Add a click event to the submit button:

function onClick(event) {
  event.preventDefault()
  const formData = new FormData(event.target.form)
  fetcher.submit(formData, { action: '/route', method: 'POST' })
}

7. Wait for fetcher.state to transition from idle to submitting and back to idle.

8. Inspect fetcher.data and see that is contains the response from the action.

Expected Behavior

A fetcher.Form interaction should resolve to the same state as an explicit call to fetcher.submit.

Actual Behavior

fetcher.submit receives the action response whereas fetcher.Form interactions do not.

NOTES:

1. Changing the click handler to a submit handler prevents fetcher.data from being set as well, even though the event handler code is the same.

2. Interestingly, fetcher.state will transition from submitting to idle during fetcher.Form interaction before the router action actually completes (though this may just be a result of async functions doing their thing)

[dlindahl]

I should note that if this is the intended behavior, documenting that behavior would be much appreciated.

[brophdawg11]

Could you provide a reproduction? Both ways of submitting are working for me in this example: https://codesandbox.io/p/sandbox/dark-leaf-hmvm3l

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that aren't actionable. Please reach out if you have more information for us! 🙂