Protecting against multiple form submission - disable the submit button

[Tomasz]

I would like to protect against multiple form submission in KendoReact Form. I would like to disable the submit button after clicking it. I'm missing some kind of field like isSubmitting to indicate that submission is in progress. The allowSubmit field does not change to false after submitting the form.

[Filip]

Hi, Tomasz,

I can recommend passing `!formRenderProps.allowSubmit` to the `disabled` prop of the button. Here is an example which disables the button after submit and it cannot be clicked again:

• https://stackblitz.com/edit/react-bvrmnjej-wxsrnz5t?file=app%2Fapp.tsx

In case this is not exactly what you are looking for, please let me know the details of your exact scenario and I will gladly assist further in achieving the desired functionality.

Regards,
Filip
Progress Telerik

[Tomasz]

Hello, Filip,
Thank you for the feedback.

In my opinion allowSubmit is only changed when fields in the form are validated. If the form is valid, and we click submit, the allowSubmit field is still true. In this case, when we have a slow network and the user clicks submit twice, there is a risk that we send data to the backend twice.

Best,
Tomek

[Filip]

Hi, Tomasz,

Yes, your observation about the allowSubmit is correct. Another approach I can suggest is to manage your own “submitting” state in the component, disable the button as soon as the user clicks “Submit,” and then re-enable the button once you’ve finished handling the submission (or after some delay). I have updated the previously sent example to showcase this approach as well:

• https://stackblitz.com/edit/react-bvrmnjej-zeygzypy?file=app%2Fapp.tsx

Regards,
Filip

[Tomasz]

OK, thanks Filip