Nested Fields can cause issues (FieldArray > Field > Field)

[311chaos]

Are you submitting a bug report or a feature request?

I think it could be a bug, but perhaps I am doing something that is not intended.

What is the current behavior?

I have a scenario where I have a FieldArray with a Field, that has a Field as child. The idea is that we only show the maxLength field if the parent isList field is true. Sorry, for the sudo-code here, but this is an example of the nesting:

<FieldArray name="options">
{({ fields }) => {
    {fields.map((name, index) => (
        <div>
            <Field name={`${name}.title`} component="Input" />
            <Field name={`${name}.isList`} type="checkbox"}>
                {({input, meta}) => (
                    <div>
                        {input.isList ? (
                            <Field name={`${name}.maxLength`} component="Input />
                        )
                        : (<div>foo</div>)

                        }
                    </div>
                )}
            </Field>
        </div>
    )}
}
</FieldArray>

The fields all work fine this way, however when using move as provided from the FieldArray's fields property, it results in an error:

fields.move(0, 1)

What is the expected behavior?

Fields would move, and the form would not explode.

Sandbox Link

At the default state, click the massively oversized "Move" button.

https://codesandbox.io/s/32p402x3om

What's your environment?

"final-form": "4.10.0",
"final-form-arrays": "1.1.0",
"react": "16.4.0",
"react-dom": "16.4.0",
"react-final-form": "3.6.5",
"react-final-form-arrays": "1.0.6",
"styled-components": "3.3.2"

Other information

[lukeschunk]

*pseudo-code

[311chaos]

Thanks @lukeschunk . I could edit it, but I guess I will leave it to forever memorialize my mistake.

[erikras]

sudo code

You sound like my boss! 🤣 ❤️

[311chaos]

I have been trying to find work arounds for this issue, and have discovered some additional issues. It seems the latest updates to final-form-arrays or react-final-form-arrays have made the issue worse.

An example of move NOT working in the most basic way while using the latest lib versions:

https://codesandbox.io/s/jz63zn3mkv

If you downgrade that same code (as taken from the example in the repo) to older versions of final-form, it starts to work again:

https://codesandbox.io/s/33r815996

[Juansasa]

The problem with this is the unmount from react-final-form still reference to old field names even when the index changes. However final form should handle deletion of validators in a more graceful manner inside unsubscription and not completely failed

[jwld]

Please fix this...it's killing me slowly...