remix-validated-form
remix-validated-form copied to clipboard
[Bug]: Inconsistency when updating a nested value with `useField` vs `useFieldArray`
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/with-zod": "*"
- "remix-validated-form": "*"
Please provide a link to a minimal reproduction of the issue.
https://codesandbox.io/p/devbox/958zwp?file=%2Fapp%2Froutes%2Findex.tsx%3A1%2C1-90%2C1
Steps to Reproduce the Bug or Issue
- Open the page. Observe that the input field is populated with the correct initial value ("example").
- Click on the input field to focus on it.
- Change the value in the input field.
- Notice that the rendered value of
options.[0].values[0].name
on the screen does not update to reflect the changes made in the input field. - Click on the "Call .replace() with Date.now()" button.
- Observe that both the input field value and the corresponding rendered field
options.[0].values[0].name
on the screen update correctly withDate.now()
, indicating they are connected.
Expected behavior
I would expect that useField
or even useControlField
would be able to change a deep nested value and changes to it be reactive on any consumer of the form state (useFieldArray
in this case)
Screenshots or Videos
https://github.com/airjp73/remix-validated-form/assets/2286385/5939a568-d476-4f38-903b-7c302ee710dd
Platform
- OS: [e.g. macOS, Windows, Linux]
Additional context
No response
This kind of inconsistency is something I'm hoping to fix with v6 (#364)