Description:
In our application, we use Kendo React Form. When the user submits the form, we call an async API in the onSubmit handler. We want to prevent users from clicking the submit buttons (including custom buttons in our office ribbon) while the API call is in progress, and only re-enable them after the API call completes (either success or failure).
Currently, formRenderProps.allowSubmit only reflects the form’s validation state, not the async submission state. This means users can click the submit buttons multiple times while the API call is pending.
Expected Behavior:
• There should be a built-in way (e.g., a submitting or loading flag in formRenderProps) to indicate when the form is in the process of submitting, so we can disable submit buttons during this time.
• Alternatively, the form should automatically prevent further submissions until the async onSubmit completes.
Questions:
• Is there a recommended way to handle this scenario with Kendo React Form?
• If not, can you consider adding a submitting or loading state to formRenderProps for this purpose?
Example:
<Form
onSubmit={async (data, closeAfterSave) => {
// API call here
}}
render={formRenderProps => (
<button
disabled={!formRenderProps.allowSubmit || formRenderProps.submitting}
onClick={() => formRenderProps.onSubmit(false)}
>
Save
</button>
)}
/>
The current workaround is to clone the initialValues manually outside the Form component using the standard JS function structuredClone.
const handleFormRef = useCallback<RefCallback<FormHandle>>(form => {
if (form) {
form.values = structuredClone(initialValues);
}
}, []);
<KendoForm ref={handleFormRef} />