form icon indicating copy to clipboard operation
form copied to clipboard

Clear debounce timeout on unmount

Open Lukas-Kullmann opened this issue 5 years ago • 0 comments

I'm not sure how to explain this, but here it goes:

We were using react-form and had a fieldInstance.debounce in the field's validate function. When you were removing the field while the debounce is running and the validation failed, the error would be added to the now non existing element.

This PR fixes this issue by canceling the debounce when the component that calls useField unmounts.

I prepared a small code sandbox to highlight the issue: https://codesandbox.io/s/beautiful-resonance-iri1u

To reproduce the issue, click the remove button right after the page is loaded. It will show you that the form cannot be submitted.

If you blur the input first and then click the remove button, it works.

What is going on under the hood is that there is a validation bound to the input field. When you click the remove button without blurring the input element first, the validation starts and the element is removed from the form. After the element is removed, the validation fails. The error message is set to the non existing form field. And the form is not submittable.

This is fixed if the validation is cancelled when the element is removed. The implementation that I did does exactly that for the case of a debounced synchronous validation.

If validation is async out of other reasons (e.g. it sends the value to a server), then the bug described above would likely me still present. I think that fixing this would need quite some refactoring in the core of the useForm hook. But I do not dare changing this as it is very likely I break stuff.

Lukas-Kullmann avatar Jun 19 '20 13:06 Lukas-Kullmann