Fix insert mutator removing fields unexpectedly.

Author: huan086

src/insert.js

@@ -1,40 +1,40 @@
 // @flow
 import type { MutableState, Mutator, Tools } from 'final-form'
-import moveFieldState from './moveFieldState'
+import copyField from './copyField'
 import { escapeRegexTokens } from './utils'
 
 const insert: Mutator<any> = (
   [name, index, value]: any[],
   state: MutableState<any>,
-  { changeValue, resetFieldState }: Tools<any>
+  { changeValue }: Tools<any>
 ) => {
   changeValue(state, name, (array: ?(any[])): any[] => {
     const copy = [...(array || [])]
     copy.splice(index, 0, value)
     return copy
   })
 
-  const backup = { ...state.fields }
-
   // now we have increment any higher indexes
   const pattern = new RegExp(`^${escapeRegexTokens(name)}\\[(\\d+)\\](.*)`)
-
-  // we need to increment high indices first so
-  // lower indices won't overlap
-  Object.keys(state.fields)
-    .sort()
-    .reverse()
-    .forEach(key => {
-      const tokens = pattern.exec(key)
-      if (tokens) {
-        const fieldIndex = Number(tokens[1])
-        if (fieldIndex >= index) {
-          // inc index one higher
-          const incrementedKey = `${name}[${fieldIndex + 1}]${tokens[2]}`
-          moveFieldState(state, backup[key], incrementedKey)
-        }
+  const newFields = {}
+  Object.keys(state.fields).forEach(key => {
+    const tokens = pattern.exec(key)
+    if (tokens) {
+      const fieldIndex = Number(tokens[1])
+      if (fieldIndex >= index) {
+        // Shift all higher indices up
+        const incrementedKey = `${name}[${fieldIndex + 1}]${tokens[2]}`
+        copyField(state.fields, key, newFields, incrementedKey)
+        return
       }
-    })
+    }
+
+    // Keep this field that does not match the name,
+    // or has index smaller than what is being inserted
+    newFields[key] = state.fields[key]
+  })
+
+  state.fields = newFields
 }
 
 export default insert

src/insert.test.js

@@ -84,7 +84,7 @@ describe('insert', () => {
   })
 
   it('should increment other field data from the specified index', () => {
-    const array = ['a', 'b', 'c', 'd']
+    const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']
     // implementation of changeValue taken directly from Final Form
     const changeValue = (state, name, mutate) => {
       const before = getIn(state.formState.values, name)
@@ -111,15 +111,15 @@ describe('insert', () => {
           touched: true,
           error: 'B Error'
         },
-        'foo[2]': {
-          name: 'foo[2]',
+        'foo[9]': {
+          name: 'foo[9]',
           touched: true,
-          error: 'C Error'
+          error: 'J Error'
         },
-        'foo[3]': {
-          name: 'foo[3]',
+        'foo[10]': {
+          name: 'foo[10]',
           touched: false,
-          error: 'D Error'
+          error: 'K Error'
         }
       }
     }
@@ -132,7 +132,20 @@ describe('insert', () => {
     expect(state).toEqual({
       formState: {
         values: {
-          foo: ['a', 'NEWVALUE', 'b', 'c', 'd']
+          foo: [
+            'a',
+            'NEWVALUE',
+            'b',
+            'c',
+            'd',
+            'e',
+            'f',
+            'g',
+            'h',
+            'i',
+            'j',
+            'k'
+          ]
         }
       },
       fields: {
@@ -147,16 +160,16 @@ describe('insert', () => {
           error: 'B Error',
           lastFieldState: undefined
         },
-        'foo[3]': {
-          name: 'foo[3]',
+        'foo[10]': {
+          name: 'foo[10]',
           touched: true,
-          error: 'C Error',
+          error: 'J Error',
           lastFieldState: undefined
         },
-        'foo[4]': {
-          name: 'foo[4]',
+        'foo[11]': {
+          name: 'foo[11]',
           touched: false,
-          error: 'D Error',
+          error: 'K Error',
           lastFieldState: undefined
         }
       }