useActionState clears all fields when validation error found
Answered
Gray-tailed Tattler posted this in #help-forum
Gray-tailed TattlerOP
This seems undesirable from a UX perspective. I always hate when forms clear all fields when only a subset of fields are invalid. What approach should I take to prevent this?
Answered by Round sardinella
You can return the original formData from the action and use that as the defaultValue for the inputs
2 Replies
Round sardinella
You can return the original formData from the action and use that as the defaultValue for the inputs
Answer
Gray-tailed TattlerOP
oh that's clever.
<input
name="name"
autoComplete="name"
type="text"
className="input input-primary input-lg w-full"
placeholder="Full Name"
defaultValue={('formData' in state && state.formData?.get('name')) ? (state.formData.get('name') as string) : ''}
/>