State-management on insert/... does not work on nested arrays

[PerfectPixel]

Bug or Feature?

BUG

What is the current behavior?

In nested arrays, state is not correctly managed for operations like insert:

1. step

In the following image I added two customers to my array, their names are set via initialValue on field level to Adam and Sam, both fields are not dirty. Then I press the + next to Adam to add another entry between both of them.

2. step

Now, the new second entry is:

1. not given an initial name
2. the field is dirty as it is for final form changed from Sam to ``
   The third entry (Sam) is:
3. not Sam anymore but Sean
4. if the field would have been dirty, it would be now not dirty
   Lets press the x on the new entry next.
   

3. step

This time, we get to keep Sean (formerly known as Sam), but the field is now dirty.

Analysis

One of the causes I could identify, was the use of new RegExp("^" + name + "...). As our name is something[0].customers we would actually need to escape all regex special chars like [, [ and . to retrieve a functioning expression. With the current regex, tokens will always be null and, therefore, the state is never moved.

On a side-note, the regex is also broken for non-nested arrays:
^some.path.customers\[(\d+)\](.*) does not only match some.path.customers[0] but also someapathacustomers[0]. The . would already need escaping.

https://codesandbox.io/s/react-final-form-field-arrays-6ikh2?fontsize=14

What is the expected behavior?

State should be correctly managed. e.g. if an item is inserted between two items, the state of the original item should be moved.

Sandbox Link

https://codesandbox.io/s/react-final-form-field-arrays-6ikh2?fontsize=14

What's your environment?

Newest versions (see sandbox)

@erikras I am happy to help fixing the issues. One of the options is to escape special chars within the name or do a string comparison, maybe by using toPath and then compare the segments.

[erikras]

Published fix in v3.0.2.