airjp73/rvf

[Bug]: Inconsistency when updating a nested value with `useField` vs `useFieldArray`

weslleyaraujo opened this issue · 2 comments

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?

  • "@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

  1. Open the page. Observe that the input field is populated with the correct initial value ("example").
  2. Click on the input field to focus on it.
  3. Change the value in the input field.
  4. 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.
  5. Click on the "Call .replace() with Date.now()" button.
  6. Observe that both the input field value and the corresponding rendered field options.[0].values[0].name on the screen update correctly with Date.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

Screen.Recording.2024-04-05.at.17.11.16.mov

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)

RVF v6 has been released 🎉

This issue no longer exists in v6. If it's still a problem in that version, please feel free to open a new issue.

You can find the documentation here and the migration guide here.