[docs][form] Add an example with React.useActionState
#2983
Conversation
mj12albert
added
docs
commit: |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Bundle size report
|
| <Field.Error className={styles.Error} /> | ||
|
|
||
| <Field.Error match={!!state.serverErrors.username}> | ||
| {state.serverErrors.username} | ||
| </Field.Error> |
There was a problem hiding this comment.
When returning errors with useActionState, passing them to the errors prop forces the validity state to be invalid: https://github.com/mui/base-ui/blob/master/packages/react/src/field/utils/getCombinedFieldValidityData.ts#L15
This blocks re-submitting the form for revalidation on the server (in the server fn) so the error gets stuck
| }); | ||
|
|
||
| return ( | ||
| <Form className="flex w-full max-w-64 flex-col gap-4" action={formAction}> |
There was a problem hiding this comment.
onSubmit (or the internal effect from errors prop + submittedRef.current) handles focusing the first control with an error, which seems to be missing here. Does something else need to be done?
There was a problem hiding this comment.
Oh it's because I'm not passing the errors (assumed to be returned by a server/externally) to the errors prop #2983 (comment)
Maybe here: https://github.com/mui/base-ui/blob/master/packages/react/src/form/Form.tsx#L64
...could we assume that external errors via the errors prop are expected to be cleared externally (server-side) and shouldn't block submission? 🤔
Somewhat related - I'm not sure where onClearErrors should fit into all of this #2758
There was a problem hiding this comment.
could we assume that external errors via the errors prop are expected to be cleared externally (server-side) and shouldn't block submission? 🤔
I think this relates to Field.Root's validationMode prop - that makes sense for onSubmit but not onBlur and onChange? Maybe Form should be able to override all of their props with its own validationMode prop that you can set to onSubmit, in which case that behavior would make sense, because then if there are any errors it shouldn't block submission as the validation happens on submit
3 participants
Preview: https://deploy-preview-2983--base-ui.netlify.app/react/components/form#submit-with-a-server-function
TODO