How to detect that a change is in flight (react)

General
1

We have a form and have the submit button hooked up to the errors from onChange as described in the docs. However, if you type and hit enter in a form, you can trigger the form submit before the onChange callback is invoked with the new data and results. This means, if the form data was already valid, and the user updates then hits enter, it will submit the stale data.

Is there any way to detect if the form is currently being updated and a validation is in progress? If I could at least know that there is a validation happening and I should wait for it to finish to submit then I wouldn’t be able to submit stale data. I’m surprised this hasn’t come up before, because it seems like a pretty big race condition, I was easily able to type and hit enter and beat the onChange callback.

2

Hi @PilotConway,

We never encountered this issue before. However, in some of the React Material renderers (e.g. the text renderer) we have a debounce buffer of 300ms plus the validation time, so technically I can see how this could happen when using a submit pattern. The 300ms is maybe a bit long, but even only 50ms could be too long for a fast typer.

Sadly there is no easy way to check whether JSON Forms is in the debounce waiting state. At the current time you would need to re-register all renderers which use the debounce buffer and add this logic there on your own.