Next 15 useActionState and form actions / prevent unexpected submits

[Berzerk3000]

Summary

So for a while now - in several Apps - I sometimes get an error message set in the outputted form html:

javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')

to let next handle the formdata completely I usually use it like so :

const [state, dispatch] = useActionState(someServerAction, { message: ' ', type: FormSubmitTypes.SUCCESS })

...

<form action={dispatch}> ....

and my formactions are usually something like this:

"use server"

export const someServerAction = async (prevState: any, formData: FormData) => { ...

really nothing fancy I think. One thing I might add is that usually the flow for these apps is you load item data on pageload then pass it down to the form component bits and distribute defaultValues if present.

for most apps this seems to be no issue but for one I have odd behaviours happening and I think it might be tied to this .. silent error.

if the actionState is not meant to be used that way - what is the propper way then to react on action response? I have rooted out issues like button without a type etc.

Additional information

A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')

Example

No response

[icyJoseph]

Are you also using onSubmit?

[Berzerk3000]

no I do not. the form action is tied to the dispatch from useActionState.

[icyJoseph]

Interesting, have you also discarded this way to submit forms?

• the user presses Enter while editing a field (e.g., <input type="text">) in a form,

[Berzerk3000]

I did not. Same as with the submit. I want to let next handle the submit. I do not have any extra mutations or submit methods implemented. It is just the form, an action tied to an actionState with form fields. There is also no mismatch from controlled to uncontrolled and the sort.

the form functionality, data processing etc. all works. though.

[icyJoseph]

Yeah, like, I think we need to try to generate a small reproduction repository. This is a react feature too... so we should probably know what canary version we have at hand, what Next.js version do you have?

[Berzerk3000]

I noticed this since I thin next 14. I keep our projects updated and they are currently at least 15.2.4 and react accordingly set to ^19

this is the usual min package we use for an empty scaffold on a new ERP tool:

"scripts": {
    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 next dev -p 4005 --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "accept-language": "^3.0.20",
    "bootstrap": "^5.3.5",
    "bootstrap-icons": "^1.11.3",
    "lenis": "^1.2.3",
    "next": "15.3.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "sass": "1.77.6",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.3.0",
    "typescript": "^5"
  }

while the sass version is lower on purpose to not get the deprecation notes from using bootstrap.

this is an example of how I typically set up the form action:

export const sendContactFormAction = async (_prevState: FormState, formData: FormData) => {
    try {

        const [error, response] = await catchError(
            fetch(MAILENDPOINT, {
                method: "POST",
                headers: {
                    "X-App-Token": process.env.CONFIRMATION_TOKEN || ''
                },
                body: formData,
            })
        );

        if (error) {
            console.warn("Fetch error:", error.message);
            return {success: false, message: "error message server"};
        }

        if (!response?.ok) {
            console.warn(`Failed to send message. Status: ${response?.status}`);

            return { success: false, message: "error message fetching"};
        }

        return { success: true, message: "success message"}

    } catch (error: unknown) {
        console.warn("Unexpected error:", error instanceof Error ? error.message : "Unknown error occurred.");
        return { success: false, message: "unknown error"}
    }
};

Here is an example of how I would make a generic custom styled input element.

interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    wrapperClass?: string
    label?:string
    biIconClass?: string
    error?: boolean
}
const CustomInput = ({ error,wrapperClass, label, id,  biIconClass, ...inputProps }: CustomInputProps) => {
    const generatedId = useId()
    const inputId = id ?? generatedId

    return (
        <div className={wrapperClass ?? 'col-12 col-xl-4'}>
            <div className={`${Styles.formField} ${error ? Styles.error : ''}`}>
                <label htmlFor={inputId} className={Styles.placeholderLabel}>
                    {biIconClass && <i className={biIconClass} />}
                    {label}
                </label>
                <input id={inputId} {...inputProps} />
            </div>
        </div>
    )
}

I will try to get a scaffold going where I can share the real code to reproduce the issue. Thanks for the interest in the matter tho :)

[ludvigeriksson]

Did you solve this?

[Berzerk3000]

no, I was not able to figure out what is causing it.

[icyJoseph]

There's something going on when the action does revalidatePath, IIRC - I looked at this (without much more progress) recently here, #82655