Insert does not cause array children to refresh correctly.

[toccoto]

Are you submitting a bug report or a feature request?

Bug

What is the current behavior?

https://codesandbox.io/s/ypj0p?file=/src/App.js

Insert does not cause the full array to refresh causing children to display out of date data.

What is the expected behavior?

When an insert occurs, all children components of the array re-render appropriately

Sandbox Link

https://codesandbox.io/s/ypj0p?file=/src/App.js

What's your environment?

(See sandbox link)

Other information

[Nttz]

Not only "insert" does not work, but "unshift" too.

Sandbox Link

https://codesandbox.io/s/react-final-form-field-arrays-l15yi?file=/index.js

[trumbitta]

I ended up writing my own mutator for insert:

          insertAt: (args, state, tools) => {
            const [index, newStation] = args;
            const roadmap: Roadmap =
              tools.getIn(state, 'formState.values.roadmap') || [];

            const newState = tools.setIn(state, 'formState.values.roadmap', [
              ...roadmap.slice(0, index),
              newStation,
              ...roadmap.slice(index),
            ]);

            Object.assign(state, newState);
          },

[trdaya]

I ended up writing my own mutator for insert:

          insertAt: (args, state, tools) => {
            const [index, newStation] = args;
            const roadmap: Roadmap =
              tools.getIn(state, 'formState.values.roadmap') || [];

            const newState = tools.setIn(state, 'formState.values.roadmap', [
              ...roadmap.slice(0, index),
              newStation,
              ...roadmap.slice(index),
            ]);

            Object.assign(state, newState);
          },

Hi @trumbitta , I added this to the mutators object on the <Form> component from react-final-form.
Then I used it as
fields.insertAt(3, { firstName: "abc", lastName: "def" });
following the signature index, value.
But fields.value did not change and hence nothing re-rendered.
Am I doing something wrong?

[nik-lampe]

I ended up replacing the mutator with the following:

insertAt: ([name, index, value], state, { changeValue }) => {
  changeValue(state, name, array => {
    const copy = [...(array || [])]
    copy.splice(index, 0, value)
    return copy
  })
}

But I really don't know if this breaks something somewhere else. I looked into the code and there was no chance for me to wrap my head around the state management in these mutators.

[alexander-r-jaimy]

any progress? how is that insert is still not working? =(

[Mottoweb]

i have the same problem with unshift, any updates?

[Alexlloydwhite]

Insert still not working. Versions of things i'm on:
"final-form": "^4.20.6",
"final-form-arrays": "^3.0.2",
"react": "^16.11.0",
"react-final-form": "^6.5.8",
"react-final-form-arrays": "^3.1.3"

I'm wondering if upgrading to a newer version of React will help resolve?

Would it be possible to update the documentation to state that this is broken on x version?

[ludusrusso-rc]

same issue for me

[Elecweb]

I have an update about this issue and submitted the PR
final-form/final-form-arrays#96