Fix remove mutator removing more fields than expected.

Revert changes from #39 that moves `fieldSubscribers`, causing the wrong field to be notified.

Author: huan086

src/copyField.js

@@ -0,0 +1,35 @@
+// @flow
+import type { InternalFieldState } from 'final-form/dist/types'
+
+function copyField(
+  oldFields: { [string]: InternalFieldState },
+  oldKey: string,
+  newFields: { [string]: InternalFieldState },
+  newKey: string
+) {
+  newFields[newKey] = {
+    ...oldFields[oldKey],
+    name: newKey,
+    // prevent functions from being overwritten
+    // if the newFields[newKey] does not exist, it will be created
+    // when that field gets registered, with its own change/blur/focus callbacks
+    change: oldFields[newKey] && oldFields[newKey].change,
+    blur: oldFields[newKey] && oldFields[newKey].blur,
+    focus: oldFields[newKey] && oldFields[newKey].focus,
+    lastFieldState: undefined // clearing lastFieldState forces renotification
+  }
+
+  if (!newFields[newKey].change) {
+    delete newFields[newKey].change
+  }
+
+  if (!newFields[newKey].blur) {
+    delete newFields[newKey].blur
+  }
+
+  if (!newFields[newKey].focus) {
+    delete newFields[newKey].focus
+  }
+}
+
+export default copyField

src/remove.js

@@ -1,12 +1,12 @@
 // @flow
 import type { MutableState, Mutator, Tools } from 'final-form'
-import moveFieldState from './moveFieldState'
+import copyField from './copyField'
 import { escapeRegexTokens } from './utils'
 
 const remove: Mutator<any> = (
   [name, index]: any[],
   state: MutableState<any>,
-  { changeValue, renameField, getIn, setIn }: Tools<any>
+  { changeValue, getIn, setIn }: Tools<any>
 ) => {
   let returnValue
   changeValue(state, name, (array: ?(any[])): any[] => {
@@ -19,14 +19,12 @@ const remove: Mutator<any> = (
   // now we have to remove any subfields for our index,
   // and decrement all higher indexes.
   const pattern = new RegExp(`^${escapeRegexTokens(name)}\\[(\\d+)\\](.*)`)
-  const backup = { ...state, fields: { ...state.fields } }
+  const newFields = {}
   Object.keys(state.fields).forEach(key => {
     const tokens = pattern.exec(key)
     if (tokens) {
       const fieldIndex = Number(tokens[1])
       if (fieldIndex === index) {
-        // delete any subfields for this array item
-        delete state.fields[key]
         // delete any submitErrors for this array item
         // if the root key of the delete index
         if (key === `${name}[${index}]`) {
@@ -38,19 +36,24 @@ const remove: Mutator<any> = (
             state = setIn(state, path, submitErrors)
           }
         }
-      } else if (fieldIndex > index) {
-        // shift all higher ones down
-        delete state.fields[key]
+
+        return
+      }
+
+      if (fieldIndex > index) {
+        // Shift all higher indices down
         const decrementedKey = `${name}[${fieldIndex - 1}]${tokens[2]}`
-        if (backup.fields[decrementedKey]) {
-          moveFieldState(state, backup.fields[key], decrementedKey, backup)
-        } else {
-          // take care of setting the correct change, blur, focus, validators on new field
-          renameField(state, key, decrementedKey)
-        }
+        copyField(state.fields, key, newFields, decrementedKey)
+        return
       }
     }
+
+    // Keep this field that does not match the name,
+    // or has index smaller than what is being removed
+    newFields[key] = state.fields[key]
   })
+
+  state.fields = newFields
   return returnValue
 }
 

src/remove.test.js

@@ -94,14 +94,6 @@ describe('remove', () => {
           touched: false,
           error: 'B Error'
         },
-        'foo[2]': {
-          name: 'foo[2]',
-          blur: blur2,
-          change: change2,
-          focus: focus2,
-          touched: true,
-          error: 'C Error'
-        },
         'foo[3]': {
           name: 'foo[3]',
           blur: blur3,
@@ -110,6 +102,14 @@ describe('remove', () => {
           touched: false,
           error: 'D Error'
         },
+        'foo[2]': {
+          name: 'foo[2]',
+          blur: blur2,
+          change: change2,
+          focus: focus2,
+          touched: true,
+          error: 'C Error'
+        },
         anotherField: {
           name: 'anotherField',
           touched: false
@@ -135,15 +135,6 @@ describe('remove', () => {
           touched: true,
           error: 'A Error'
         },
-        'foo[1]': {
-          name: 'foo[1]',
-          blur: blur1,
-          change: change1,
-          focus: focus1,
-          touched: true,
-          error: 'C Error',
-          lastFieldState: undefined
-        },
         'foo[2]': {
           name: 'foo[2]',
           blur: blur2,
@@ -153,6 +144,15 @@ describe('remove', () => {
           error: 'D Error',
           lastFieldState: undefined
         },
+        'foo[1]': {
+          name: 'foo[1]',
+          blur: blur1,
+          change: change1,
+          focus: focus1,
+          touched: true,
+          error: 'C Error',
+          lastFieldState: undefined
+        },
         anotherField: {
           name: 'anotherField',
           touched: false
@@ -189,6 +189,14 @@ describe('remove', () => {
         }
       },
       fields: {
+        'foo[0][3]': {
+          name: 'foo[0][3]',
+          blur: blur3,
+          change: change3,
+          focus: focus3,
+          touched: false,
+          error: 'D Error'
+        },
         'foo[0][0]': {
           name: 'foo[0][0]',
           blur: blur0,
@@ -213,14 +221,6 @@ describe('remove', () => {
           touched: true,
           error: 'C Error'
         },
-        'foo[0][3]': {
-          name: 'foo[0][3]',
-          blur: blur3,
-          change: change3,
-          focus: focus3,
-          touched: false,
-          error: 'D Error'
-        },
         anotherField: {
           name: 'anotherField',
           touched: false
@@ -242,23 +242,6 @@ describe('remove', () => {
         }
       },
       fields: {
-        'foo[0][0]': {
-          name: 'foo[0][0]',
-          blur: blur0,
-          change: change0,
-          focus: focus0,
-          touched: true,
-          error: 'A Error'
-        },
-        'foo[0][1]': {
-          name: 'foo[0][1]',
-          blur: blur1,
-          change: change1,
-          focus: focus1,
-          touched: true,
-          error: 'C Error',
-          lastFieldState: undefined
-        },
         'foo[0][2]': {
           name: 'foo[0][2]',
           blur: blur2,
@@ -268,76 +251,29 @@ describe('remove', () => {
           error: 'D Error',
           lastFieldState: undefined
         },
-        anotherField: {
-          name: 'anotherField',
-          touched: false
-        }
-      }
-    })
-  })
-
-  it('should remove value from the specified index, and handle new fields', () => {
-    const array = ['a', { key: 'val' }]
-    const changeValue = jest.fn()
-    const renameField = jest.fn()
-    function blur0() {}
-    function change0() {}
-    function focus0() {}
-    function blur1() {}
-    function change1() {}
-    function focus1() {}
-    function blur2() {}
-    function change2() {}
-    function focus2() {}
-    const state = {
-      formState: {
-        values: {
-          foo: array,
-          anotherField: 42
-        }
-      },
-      fields: {
-        'foo[0]': {
-          name: 'foo[0]',
+        'foo[0][0]': {
+          name: 'foo[0][0]',
           blur: blur0,
           change: change0,
           focus: focus0,
           touched: true,
           error: 'A Error'
         },
-        'foo[1]': {
-          name: 'foo[1]',
+        'foo[0][1]': {
+          name: 'foo[0][1]',
           blur: blur1,
           change: change1,
           focus: focus1,
-          touched: false,
-          error: 'B Error'
-        },
-        'foo[1].key': {
-          name: 'foo[1].key',
-          blur: blur2,
-          change: change2,
-          focus: focus2,
-          touched: false,
-          error: 'B Error'
+          touched: true,
+          error: 'C Error',
+          lastFieldState: undefined
         },
         anotherField: {
           name: 'anotherField',
           touched: false
         }
       }
-    }
-    const returnValue = remove(['foo', 0], state, {
-      renameField,
-      changeValue,
-      getIn,
-      setIn
     })
-    expect(returnValue).toBeUndefined()
-    expect(renameField).toHaveBeenCalledTimes(1)
-    expect(renameField.mock.calls[0][0]).toEqual(state)
-    expect(renameField.mock.calls[0][1]).toEqual('foo[1].key')
-    expect(renameField.mock.calls[0][2]).toEqual('foo[0].key')
   })
 
   it('should remove value from the specified index with submitError if one error in array', () => {