Remove mutator does not remove the correct field

[JVallius]

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

Removing a field using remove mutator does not remove the correct field from the screen, if the fields are re-arranged using move mutator before removing.

What is the expected behavior?

Correct field is removed from the screen

Sandbox Link

To reproduce the bug:
https://codesandbox.io/s/final-form-arrays-bug-x17sb

1. Create two customers => (order: 1,2)
2. Reorded customers by dragging => (order: 2,1)
3. Remove Customer#2 by clicking red cross
4. Customer#1 is removed from the screen instead of Customer#2

What's your environment?

The bug can be reproduced using final-form-arrays version from 1.2.0 to 3.0.2
Version 1.1.2 is working as expected

"final-form": "4.18.7",
"final-form-arrays": "3.0.2",
"react": "16.12.0",
"react-beautiful-dnd": "13.0.0",
"react-dom": "16.12.0",
"react-final-form": "6.3.5",
"react-final-form-arrays": "3.1.0",

Other information

Final Form state seems to be updated correctly (as seen in sandbox example). But somehow Field components doesn't get updated with those values.

[erikras-richard-agent]

This is a React Key Management Issue (Same as #128)

This issue has the same root cause as #128 - using field name (array index) as the React key when rendering reorderable lists.

Root Cause

Your sandbox uses name as the React key:

fields.map((name, index) => (
  <div key={name}> {/* name = 'customers[0]', 'customers[1]' */}

What happens:

1. Initial: customers[0]="Alice", customers[1]="Bob"
2. After move: customers[0]="Bob", customers[1]="Alice" (values correct ✅)
3. React sees same keys (customers[0], customers[1])
4. React reuses components without remounting
5. Components show stale data from before the move ❌

As you noted: "Final Form state seems to be updated correctly" - the library works fine. This is a React rendering issue.

Solution: Use Stable Unique Keys

// ✅ Add unique ID to each customer
const initialValues = {
  customers: [
    { id: uuid(), name: 'Alice' },
    { id: uuid(), name: 'Bob' }
  ]
}

// Use ID as React key
fields.map((name, index) => {
  const customer = fields.value[index]
  return (
    <Draggable key={customer.id} draggableId={customer.id}> {/* Stable key */}
      <Field name={`${name}.name`} />
    </Draggable>
  )
})

This is the standard React pattern for dynamic/reorderable lists. From React docs:

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted.

Every drag-and-drop library (react-beautiful-dnd, dnd-kit, etc.) documents this requirement.

Why v1.1.2 "Worked"

Earlier versions may have had different field registration logic that forced remounting, but that would have been less efficient. The current behavior is correct - the issue is in the application code using indices as keys.

Recommendation

Close as working as intended. This is a React constraint, not a library bug. Users must:

1. Add unique IDs to array items
2. Use those IDs as React keys
3. Never use array indices/field names as keys for reorderable lists

The library cannot fix this - React's reconciliation happens before final-form has any control.

Related

• #128 (same issue with remove/pop/shift)
• React docs on list keys
• react-beautiful-dnd docs on stable keys

cc @erikras