Prevent double form submission

[brunobely]

Following up on #790:

Conform is designed to handle validation only and will prevent form submission if validation fails. However, the actual submission is left to the Remix <Form> component [...]

At least in Next.js, the most reliable way to fully prevent double submissions is to update a ref in the form's onSubmit to indicate the action is in-flight. Since Conform handles onSubmit, I think it's fair to ask that it keep track of that internally and prevent double submissions. Perhaps this could be an opt-in controlled by a useForm option multipleSubmits that accepts 'prevent' | 'allow' | 'abort'. Something like:

const inFlight = useRef(false);

// At the top of Conform's onSubmit handler
if (inFlightRef.current && formOptions.multipleSubmits === 'prevent') return;
inFlightRef.current = true;

// Before returning from the handler
queueMicrotask(() => { inFlightRef.current = false; });

Thoughts?

[edmundhung]

Interesting idea. I am not quite sure how the queueMicrotask part would help with preventing double submissions. From what I can tell, it would reset the flag right after the onSubmit handler runs, rather than when the submission actually finishes.

Could you share a bit more about how you see this working?

[brunobely]

Ah, I was assuming the onSubmit handler was async, so yes - I meant running once the submission is finished