Skip to content

Add example around disabling default form reset behaviour #7795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add example around disabling default form reset behaviour #7795

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62f311a
Add example around disabling default form reset behaviour
tom-sherman Apr 30, 2025
b624c30
Add what to watch out for in the example
tom-sherman Apr 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions src/content/reference/react-dom/components/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,39 @@ export default function Search() {

</Sandpack>

You can override the default reset behaviour of the form by additionally passing an `onSubmit` prop to the `<form>` component calls `preventDefault` on the event and calling the action yourself. Passing `onSubmit` alongside `action` ensures the form can be progressively enhanced if this component is rendered to HTML on the server.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you put this under a new Usage heading like ## Handling form resets?

And the explanation should explain that React is matching the broswer semantics of <form action="/string">, and the fix is the same as you would have done in that case, by adding onSubmit. This ensures the progressive enhancement works the same unless you opt out with custom enhancements.

Something like:

In the browser, submitting HTML forms clears the input state. In React, we match this default even when the action is a function, to match the behavior of a progressively enhanced form (the behavior of the form before JavaScript is ready).

This means, when you submit a form with an action prop, the form data will automatically reset. To avoid clearing the input field, you can use the same technique as an HTML form and provide a onSubmit callback..."

Then also explain that if you need to reset the form manually, you can call requestFormReset. But we could add that later if you're not familiar with it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should also add a line to the caveats, and possible a troubleshooting "why is my form reset when using an action"?


Notice how in the below example now the form is not reset and your input is preserved after the form is submitted.

<Sandpack>

```js
import { startTransition } from "react";
export default function Search() {
function search(formData) {
const query = formData.get("query");
alert(`You searched for '${query}'`);
}
return (
<form
action={search}
onSubmit={(event) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
startTransition(() => {
search(formData);
});
}}
>
<input name="query" />
<button type="submit">Search</button>
</form>
);
}
```

</Sandpack>

### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}

Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
Expand Down