[Bug]: form.value() does not return the current value when called inside onSubmit
hasanayan opened this issue · 4 comments
Which packages are impacted?
-
@rvf/react -
@rvf/remix -
@rvf/zod -
@rvf/yup -
zod-form-data
What version of these packages are you using?
@rvf/remix: 6.0.0
Please provide a link to a minimal reproduction of the issue.
https://stackblitz.com/edit/remix-run-remix-vzpy7p?file=app%2Froutes%2F_index.tsx
Steps to Reproduce the Bug or Issue
- enter a value in the input
- click submit button
- check the result in "last submitted value" section below
- You'll see that the value will not appear on the first submission, but on the next submission, you'll get the value.
It seems that when form.value() is called in the onSubmit handled, it will return the previously submitted value. Looks like a memoization issue
Expected behavior
I'd expect form.value() to return the current value of the form.
Screenshots or Videos
No response
Platform
- macOS
- Chrome
Additional context
We would like to be able to get a hold of the values after successful validation and just before the data was sent to the server so that we could do some checks (not validation) and be able to prevent the submission or let it go through.
We were able to do this on the previous version because onSubmit was being called with event and the current form values and we were able to stop the submission by calling event.preventDefault().
I also tried using handleSubmit since it is called with the validated form values. However, it seems when you provide handleSubmit, the native submission to the server is not done and we are expected to do it manually within handleSubmit and we don't want to deal with that either.
we also don't want to call form.value() on the function body as it triggers re-renders on each input change
Good call-out. There are a couple APIs I've been thinking about implementing, including an onBeforeSubmit callback, that could probably cover this use-case well.
Addressed in 6.1.0 with the following apis:
And clarified documentation around state accessors.
thanks a lot!