React-final-form: Pristine with form array fields

[Gi972]

Are you submitting a bug report or a feature request?

I report a bug

What is the current behavior?

I use the form array field with a initialized value, when I change the value (in the example, I put "toto", next "tot" and back with "toto") so I come back on the initial value of the select component but
the pristine doesn't come back at the initial value.

I Fork the field Array example here:

https://codesandbox.io/s/j7o525yn23

Thanks @erikras

[zsolt-dev]

I have the same issue. Is there a way to fix this?

[snhasani]

You have to pass initial state to reset.

<ActionButton
    type="button"
    onClick={() => reset(INITIAL_VALUES)}
    disabled={submitting || pristine}
>

https://github.com/final-form/final-form#reset-initialvalues-object--void

[fernandomg]

@snhasani the issue is not related to that.

It's expected for a field to recover its pristine status if (after changing the value) the value matches its initial value.

You can read a better explanation here: https://github.com/final-form/final-form/issues/55#issuecomment-356871187

I updated the dependencies for the original code that @Gi972 posted, and it's still happening: https://codesandbox.io/s/x99z5mzn6w

[erikras]

Confirmed. This is a bug.

[311chaos]

I opened a ticket on react-final-form-arrays that looks to be quite similar.

@erikras - Let me know if I should close my ticket there as a duplicate (not sure if its an issue with rff or rffa).

https://github.com/final-form/react-final-form-arrays/issues/34

[bogdansoare]

also having this issue

[bogdansoare]

this issue also happens when you have keepDirtyOnReinitialize on the form and there is a rerender
https://codesandbox.io/s/q9r4r2o2k6

[maciejmyslinski]

I'm on it

[maciejmyslinski]

update: debugged. I'll describe it on the first @Gi972 example.

It's because react-final-form-arrays registers three fields: customers, customers[0].firstName and customers[0].lastName.

This is problematic, because later final-form iterate over all fields and compare their initial values to current values using triple equals.

Since customers value is an array, it never equals default values, since [] !== [].

[maciejmyslinski]

from what I understand, registering customers field is desired.

I see 3 possible solutions:

1. Provide custom isEqual function for customers field that always returns true. This would mean that we only calculate if a form is pristine checking values for all registered fields in the array. I'm not sure if this would behavie correcly when a field is being removed.
2. Provide custom isEqual function for customer field that runs deep equality checking.
3. Update final-form function that calculates pristine so it handles objects/arrays correctly - either by ommiting them or deeply checking.

[maciejmyslinski]

ok, I wrote tests and solved the issue in this PR ☝️
I appreciate any suggestions/code reviews 🙂

[erikras]

Published fix in [email protected].

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.