FieldArray values not updated via reset when number of items changes

[whytspace]

I am facing a weird issue realted to FieldArray and reset functionality.

In our app, we have a few of complex forms, which should allow partial updated. Therefore we continuosly update (subscription/websocket) the initialValues of the displayed form with the most recent data from the API, but without removing local changes. When the user hits the save button, we only submit the changed values to the API.

This works perfectly fine when dealing with regular Fields. Fields inside FieldArray however do not show the updated values when the number of elements change.

I created a simple reproduction of the problem by using a Todo list exmaple: https://stackblitz.com/edit/github-uzqzot?file=src%2FApp.tsx

• The form is initialized with only 1 todo
• We add a 10s interval to simulate a subscription to an API, in which we get new initialValues, updating the ones that are not dirty
• See Error
  • Only first row (index 0, the one that already existed) will show the new values.
  • The other new rows are rendered, but have no value
• Side note: if you were to reset the form again, providing the same number todos, it will be rendered correctly (wait for the next tick)
• In the debug outout you can notice that the values are actually beiing set, just not shown

Did I miss something?

---

I noticed that in the first tick the active state of the form fields cannot be determined properly.

What is the motivation of keeping this active state at all? Performance?

To me, coming from React and Formik it was quite a surprise to notice that my form state depends on wether a specific field is rendered or not. This caused a lot of confusion for me, especially since a could not find a single mention of activeness in the docs.

---

I am using:

• @modular-forms/solid 0.17.1
• solid-js 1.7.6
• vite 4.3.9
• typescript 5.1.3

[fabian-hiller]

Thank you for creating this issue. I will solve the problem as soon as possible. However, I probably won't get to it until the end of the week or next week.

The motivation behind active are forms like this one. Which show other fields depending on the value of a field. If it bothers you, you can disable this functionality in various places via the options and properties.

[whytspace]

Thank you for the quick response and your efforts! Großes Danke! :)

However, I probably won't get to it until the end of the week or next week.

Sure, no worries :)

---

I managed to find a (temporary) workaround by calling the reset function again within window.setTimeout. Ugly, but it does the trick for now.

const newInitalValues = { ... };
reset(form, { initialValues: newInitalValues });

setTimeout(() => { reset(form, { initialValues: newInitalValues }) });

[fabian-hiller]

I suspect that the problem is that reset currently only resets known fields. As you add new fields to the field array, reset can't handle them.

Calling reset twice works because the first time you update the items of the field array and this then renders and adds the new fields. This makes it possible to then reset them with the second call.

I think I will find a solution to this problem next week.

[fabian-hiller]

I will try to solve the problem in the next few days.

[fabian-hiller]

I'm sorry that I didn't get back to you on this issue, but other tasks came up. As already written in the other issue, I'm writing my bachelor thesis at the moment and therefore can't say exactly when I'll get to the technical implementation.

[mattp0123]

Facing the same issue here. @whytspace thank you for the workaround!

[fabian-hiller]

To give an update from my side. I plan to rewrite Modular Forms but the API should remain almost the same. I will try to solve all these problems. However, it will take some time until I get there.