destroyOnUnmount not respected when field is unregistered

[inv8der]

Are you submitting a bug report or a feature request?

Bug. This issue seems related to #1990 and #2518

What is the current behavior?

I'm currently working on a wizard form that spans multiple pages. For each form component, my setup looks something like this...

const mapStateToProps = (state: RootState, props: OwnProps): StateProps => ({
    initialValues: {
        ...getFormInitialValues('projectBuilder')(state),
        ...selectors.getInitialValues(state, props),
    },
});

const mapDispatchToProps: DispatchProps = {};

const DecoratedForm = reduxForm({
    form: 'projectBuilder',
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true,
})(BasicInfo);

const connector: Connector<OwnProps, Props> = connect(mapStateToProps, mapDispatchToProps);
export default translate()(connector(DecoratedForm));

The last page is a summary screen that gives you an overview of the project you're building, so I render a bunch of Field components with the values the user has entered from previous pages. With my current setup, when a user makes an update on page 1 (for instance, the project title), that change is not reflected on the summary screen. The initial value of that field replaces the dirty value in state.

After some digging, I discovered that when the page change occurs, the form component unmounts and all the fields on that page are unregistered. However, when unregisterField is called, destroyOnUnmount is not passed. This causes all the fields to be removed from state, since the ref count for each is now at 0. When the summary screen is rendered, registeredFields is undefined, so redux-form uses initialValues to populate the fields when INITIALIZE is dispatched

What is the expected behavior?

When I update a field's value on a page, that change should be reflected on any other page that renders that field.

Sandbox Link

I wasn't able to reproduce this issue in the sandbox, but you can check it out here. In my development environment, UNREGISTER_FIELD is dispatched for each field when the current page unmounts but before the next page is initialized. In the sandbox environment, the INITIALIZE action is dispatched for the next page before the fields from the previous page are unregistered. That seems to be the key.

What's your environment?

redux-form: 7.1.1
react-router: 3.2.0
react-router-redux: 4.0.8

Other information

Here's a snippet from createReduxForm.js where I believe the bug to be. IMO, destroyOnUnmount should be passed as the second argument to unregisterField.

unregister = (name: string) => {
  if (!this.destroyed) {
    if (
      this.props.destroyOnUnmount ||
      this.props.forceUnregisterOnUnmount
    ) {
      this.props.unregisterField(name) // <-- destroyOnUmount not passed as second parameter
      delete this.fieldValidators[name]
      delete this.fieldWarners[name]
    } else {
      this.props.unregisterField(name, false)
    }
  }
}

[erikras]

Published in v7.1.2.

[lock]

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.