Invalid Field Instance exception when unmounting control while being validated even in demo page

[codebury]

Hi,

My code:

@computed ready = false
...
{ this.ready ? <MyFieldset key={item.key} field={item} onAdd={item.onAdd} onDelete={item.onDel} onCancel={() => this.ready = false} /> : null }

Demo steps:

1. Select "Nested Fields".
2. Scroll to end and delete all Charlie Chaplin's hobbies.
3. Click on Add Hobbies and focus the textbox.
4. Finally, click on delete.

(Sorry, cannot upload images) Unhandled rejection Error: Validation Error: Invalid Field Instance at Q (https://foxhound87.github.io/mobx-react-form-demo/main.js:15:1346) at A.e (https://foxhound87.github.io/mobx-react-form-demo/main.js:15:1231) at Q (https://foxhound87.github.io/mobx-react-form-demo/main.js:15:1346) at A.e (https://foxhound87.github.io/mobx-react-form-demo/main.js:15:1231) at t.validate (https://foxhound87.github.io/mobx-react-form-demo/main.js:40:26827) at i (https://foxhound87.github.io/mobx-react-form-demo/main.js:35:28269) at T (https://foxhound87.github.io/mobx-react-form-demo/main.js:35:28558) at u (https://foxhound87.github.io/mobx-react-form-demo/main.js:35:28491)

Inside MyFieldset there is a textbox. When I click on cancel button, the control still being on validating process. I suppose that mobx observables are unmounted too late so when the validation process finishes, the control no longer exists.

I think there must be a method that allows the form to be destroyed in the component unmounting process or something similar.

Best regards.

[derekcannon]

Any chance of getting a fix for this? 🙏🏻

[foxhound87]

@derekcannon I still have to figure it out.

[eyrwen]

any progress on this? would be really grateful for a fix

[eyrwen]

For anyone coming here after me: Setting the options in the Form constructor to be

new Form({...}, {options: { validateOnBlur: false, validateOnChange: true}})

got around the issue for me.

[github-actions[bot]]

:tada: This issue has been resolved in version 5.4.1 :tada:

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: