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
- Keep track of registration count in registeredFields. For backward compatibility, when registration count is one, the registeredFields will not have the count property. Undo #2040. Fixes #2016, #2223,... — committed to huan086/redux-form by huan086 7 years ago
- Keep track of registration count in registeredFields. For backward compatibility, when registration count is one, the registeredFields will not have the count property. Undo #2040. Fixes #2016, #2223,... — committed to huan086/redux-form by huan086 7 years ago
- Keep track of registration count in registeredFields. For backward compatibility, when registration count is one, the registeredFields will not have the count property. Undo #2040. Fixes #2016, #2223,... — committed to huan086/redux-form by huan086 7 years ago
- Keep track of registration count in registeredFields (#2470) * Keep track of registration count in registeredFields. For backward compatibility, when registration count is one, the registeredFields w... — committed to redux-form/redux-form by huan086 7 years ago
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?