React-final-form: Pristine and dirty shouldn't change between wizard pages.

[czterystaczwarty]

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

1. Fill first and last name (pristine should change to false)
2. Click next
3. pristine back to true
4. Back to previous page
5. pristine is still true

What is the expected behavior?

pristine and dirty shouldn't change between wizard pages.

or:

There should be other way, to check state of fields that are not currently in the DOM.

Sandbox Link

https://codesandbox.io/s/wizard-field-state-gfevw?file=/Wizard.js

What's your environment?

n/a

Other information

I have multi-paged form (without validate on each page) and I want to block submitButton, when nothing has changed.

[rikutiira]

We also got surprised by this behaviour that field values are persisted but the meta state is lost once your field unmounts from the DOM.

This is caused by fields having no active subscribers. Our workaround is that we mount extra <Field> component for each field we have on the same level as the <Form> element ensuring there is always an active subscriber for our fields.

The solution is hacky and error-prone though, and it can get quite complex if you have arrays or nested arrays of fields like we do.

We personally found the way final-form deals with meta state quite confusing. It would be nice if it was at least configurable that meta state is persisted even if you don't have active subscribers, for big and complex forms it's often the case that you don't have all the fields mounted at all times.

@erikras do you think there's any chance that something is done about this in the library itself?

[erikras]

The way the Wizard is implemented it is keeping each page as a separate form, and the combining _only the values_ in the parent component. This solves _many_ problems like forcing validation when hitting "Next", only marking the fields on the page as touched when validation halts submit, etc.

You _could_ potentially raise the <Form> component up into the parent and then do some sort of conditional validation for each page, but then you've got a whole myriad of other problems to deal with.

do you think there's any chance that something is done about this in the library itself?

No.

[jeremy8883]

We ran into a similar situation, where we had some fields inside an accordion. When an accordion item is closed, its child components become unmounted, and therefore many of the Field components in the form become unmounted.

Our app is required to automatically save the form when we leave the page, but only if the form is dirty. To do this, we check the dirty state of the form state. Because the dirty state was getting reset back to false when an accordion item was getting closed, the save was not occurring in these situations when it should have.

Are there any recommendations to work around this issue? The best idea I could come up with was to track the dirty state ourselves. Which is unideal, because now we have two versions of dirty, and we need to ensure that future developers don't use the wrong value.

[jeremy8883]

What we ended up actually doing was creating a fake Field component, which lived beside the accordion. It would watch for form changes, and set its own dirty field state to true when a change is made. So when an accordion item closes, this fake Field would never become unmounted, and therefore the overall form's dirty state won't get set back to false.