redux-form: Bug: UNREGISTER_FIELD called when component Field is mounted in gets unmounted (even with destroyOnUnmount: false)

I have a problem with a wizard like structure that contains of various components that each have a structure like so.

@reduxForm({
  form: 'posteditor',
  validate,
  destroyOnUnmount:false,
})
class FuturePostModal extends Component {

So, each is referencing ‘posteditor’ as form in order to centrally store the input data. Some of the field components are part of Modals. So, the Field is part of one component and the actual field editor is opened as part of a Modal, something like this.

class PostActionComponents extends React.PureComponent {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View>
        { this.getTagsModal() }
      </View>
    );
  }

  getTagsModal(){
    const { tagModalIsVisible, tags } = this.props.state;
    return (
      <TagModal
          modalVisible={tagModalIsVisible}
          onClose={this.onCloseTagModal}
          onCancel={this.onCancelTagModal}
          tags={tags}
          visible={tagModalIsVisible}
          />
     )
  }

  onCloseTagModal(selectedItems = []){
    const { actions } = this.props;
    actions.saveTags(selectedItems);
    actions.toggleTagModal();
  }

  onCancelTagModal(){
    const { actions } = this.props;
    actions.toggleTagModal();
  }
}


@reduxForm({
  form: 'posteditor',
  destroyOnUnmount:false,
})
class TagModal extends React.PureComponent {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(data){
    this.props.onClose(data);
  }

  tags(field) {
    return (

      <SearchBoxHolder
        id={field.name}
        localSearch={field.localSearch}
        url={field.url}
        isRequired={field.isRequired}
        placeholder={field.placeholder}
        selectMultiple={field.selectMultiple}
        maxCountSize={field.maxCountSize}
        minQueryLength={field.minQueryLength}
        queryDelay={field.queryDelay}
        initialValues={field.initialValues}
        idLabel={field.idLabel}
        resultsKey={field.resultsKey}
        resultCountKey={field.resultCountKey}
        resultLabel={field.resultLabel}
        onBack={field.onCancel}
        onClose={(id,data) => {
          field.input.onChange(data => data.map(el => el.id).join(','));
          field.onClose(data);
        }}
        />
    )
  }

  render(){

    const { tags, visible } = this.props;

    return (
      <View style={styles.container}>
        <Modal visible={visible} animationType="slide" transparent={true}>
          <Field
            name="tags"
            component={this.tags}
            placeholder={getMessage('ui.search') + ' ' + getMessage('ui.tags')}
            type="text"
            value={tags.map(el => el.id).join(',')}
            props={{
              localSearch:false,
              selectMultiple:true,
              maxCountSize:2,
              minQueryLength:3,
              queryDelay:150,
              idLabel:'id',
              resultsKey:'result',
              resultCountKey:'resultCount',
              resultLabel:'label',
              onCancel: this.handleSubmit,
              onClose:this.handleSubmit,
              isRequired:false,
              initialValues:tags,
              url:config.getRESTEndpoint(URLS.TAGS)
            }}
          />
        </Modal>
      </View>
    );
  }
}

The props.onClose method just sets a state variable that shows or hides the modal. Nothing else.

The problem I have is that each time I close the modal, I see

 action @ 15:40:19.030 redux-form/UNREGISTER_FIELD 

for the relevant field, and I lose the selected value (not the form itself). Any idea why this is happening and any suggestions to debug this?

Could it be that all fields are unmounted deregistered automatically when they are unmounted? If that’s the case, than we need to have a destroyOnUnmount: false option at Field level. But basically, I would argue that unregister_field should never be called automatically when the global destroyOnUnmount = true.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 3
  • Comments: 15 (4 by maintainers)

Commits related to this issue

Most upvoted comments

If someone could recreate this in a sandbox, that would be hugely beneficial.

this update appears to have created a new issue in wizard style forms with dynamically displayed fields not being properly unregistered causing my form validation to run on unmounted fields. any workarounds?