[Bug]: `useIsSubmitting()` prevents data from being sent to the server

[meoyawn]

Which packages are impacted?

• [X] remix-validated-form
• [X] @remix-validated-form/with-zod
• [ ] @remix-validated-form/with-yup
• [ ] zod-form-data

What version of these packages are you using?

• "remix-validated-form": "^4.6.11",
• "@remix-validated-form/with-zod": "^2.0.5",

Please provide a link to a minimal reproduction of the issue.

https://github.com/meoyawn/remix-validated-form-use-is-submitting

Steps to Reproduce the Bug or Issue

1. Enter a valid url in the input
2. Submit form
3. Observe text "Required" (observe empty FormData in the Chrome Network tab)

Expected behavior

Submitting should render "Success". If you replace useIsSubmitting() call with false, you'll see it

Screenshots or Videos

You can see that formData is not passed to the server:

Platform

• OS: macOS
• Browser: Chrome
• Version: 113

Additional context

useIsSubmitting() triggers React render, which replaces the form or something. Old <input /> gets removed from the DOM, making new FormData(form) lose all the fields that get rerendered by useIsSubmitting().

Sorry I couldn't get Remix to work with Codesandbox

[airjp73]

Hi!

This is happening because you're disabling the input when isSubmitting === true. A disabled input is never included in the FormData. To fix, you could use readOnly instead of disabled.

That said, this will likely be fixed when I implement a fix for #117.

[meoyawn]

Hey, no rush, I replaced remix-validated-form with react-hook-form

[meoyawn]

and thanks! TIL that Tailwind also has a read-only: variant https://tailwindcss.com/docs/hover-focus-and-other-states#read-only