This is a bug with the latest version of React 19. There is an issue raised here: https://github.com/facebook/react/issues/31695
I have a workaround, which is to add a onSubmit
handler to the form, prevent the default behaviour, and manually call the action inside a useTransaction.
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(formRef.current || undefined);
startTransition(() => {
formAction(formData);
});
};