Add example around disabling default form reset behaviour #7795
Conversation
There was a problem hiding this comment.
Hey @tom-sherman, sorry for he delay here I've been wanting to review this since I saw it. Left a comment that should help clarify why the behavior is this way.
| @@ -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. | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
We should also add a line to the caveats, and possible a troubleshooting "why is my form reset when using an action"?
No description provided.