You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Click on "set to Jane", see that the value changes BUT the GET URL param is not updated.
?__rvfInternalFormId=the-form&name=John
Change in input field, value is updated and GET param as well -> ?__rvfInternalFormId=the-form&name=Gordon
Set the value and update it via "submit", the value is updated, the GET param not
Expected behavior
When using const { submit } = useFormContext('formId'), setting a value controlled with useControlField and then submitting the form using submit should also update the GET param in the url (worked in version 4.x before updating to 5.x).
This is caused by one of the breaking changes in v5. In the release notes, it's the section titled Values in the form are now captured before validation occurs.
The issue is that setValue from useControlField is asynchronous (like React's own setState), while submit is synchronous. Before, there was an issue where you could submit the form and then change the form values, which has been fixed. This is essentially what's happening here. submit is kicking off the submit before the content of the form has actually been updated in response to updating the controlled field. You can see this in your reproduction as well.
I think this case is still fixable though. We have an internal awaitValueUpdate helper we use when validating individual fields, and I think we should add it to the submission handler function before we capture the form values.
I won't have time to push a fix until at least Monday, so in the meantime you can make your onSubmit an async function and await Promise.resolve() before you submit.
Thanks for the fast response and the explanation, having a fix for this would be great. At the moment / as a quick fix I use the useSubmit hook from @remix-run/react:
import { useSubmit } from '@remix-run/react'
const submitForm = useSubmit()
submitForm({
__rvfInternalFormId: formId,
name
})
It works but doesn't feel right 😎 What also did work was using a button type="submit" onClick={…}, on click setting the values and then using the native button submit functionality, but the button has always to be available in the markup inside the ValidatedForm (no conditional rendering) and it didn't feel really safe timing wise.
Which packages are impacted?
remix-validated-form
@remix-validated-form/with-zod
@remix-validated-form/with-yup
zod-form-data
What version of these packages are you using?
Please provide a link to a minimal reproduction of the issue.
https://codesandbox.io/s/billowing-flower-q3cj9m?file=/app/routes/index.tsx
Steps to Reproduce the Bug or Issue
In the demo
Expected behavior
When using
const { submit } = useFormContext('formId')
, setting a value controlled withuseControlField
and then submitting the form usingsubmit
should also update the GET param in the url (worked in version 4.x before updating to 5.x).Screenshots or Videos
Platform
macos latest firefox and chrome
Additional context
No response
The text was updated successfully, but these errors were encountered: