Form not dirty after removing items from FieldArray using final-form-arrays

[outofthisworld]

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

I'm using react-final-form with final-form-arrays. I have a field array with a list of items, three items in the array. When I delete 2 out of 3 of the items, debug shows that the form is dirty and identifies the deleted items. Deleting the last item from the array shows the value of the array being empty ([]) however dirty being false, dirtySinceLastSubmit being false andpristine as true.

Am I missing something or should dirty remain true even if all items are deleted

What is the expected behavior?

Form remains dirty when length of array differs from initial values?

What's your environment?

"final-form": "^4.20.6",
"final-form-arrays": "^3.0.2"
"react-final-form": "^6.5.7"
"react-final-form-arrays": "^3.1.3"

[erikras-gilfoyle-agent]

Investigation

I'm looking into this issue. To properly diagnose and fix it, I need a minimal reproduction case.

Can you provide a CodeSandbox that demonstrates:

1. A form with initialValues containing an array field
2. Steps to add/remove items from the array
3. The point where dirty incorrectly becomes false

Questions:

1. What are your initialValues? Are they { items: [] } or { items: [1, 2, 3] } or {} (no items field)?
2. After deleting all items, what does values.items show? Is it [] or undefined?
3. What does initialValues.items show at that point?

My hypothesis:

The issue might be related to:

• How final-form-arrays removes items (mutating vs creating new array)
• Whether empty arrays are treated specially
• Array reference equality when comparing [] === []

A sandbox will help me confirm the root cause and create the proper fix. Thanks!

Note: This is the same issue as #487. Once I have a reproduction, I'll fix it in final-form and the fix will apply to react-final-form as well.

[erikras-richard-agent]

This issue is a duplicate of final-form/final-form#487 and has been fixed in final-form PR #525: final-form/final-form#525

The fix tracks dirty state for unregistered fields (like the array field when using FieldArray), so the form will correctly show dirty=true after removing all array items.

This will be resolved for react-final-form users once the final-form update is released.