Resetting a field (or a form) doesn't emit an event
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 682
- Avg merge
- 5d 18h
- Merged PRs (30d)
- 7
Description
Hello,
I have a form with a value I sync with my search param.
To make it sync on mount (search param -> form), I use onMount listener of the field.
To make it sync back later (form -> search param), I intend to use onChange for every field change.
But I figured out that clearing a field doesn't actually emit any event I can listen to.
I ended up moving search param reset function to the place where reset actually happens, but I believe the "reset" event might be a thing to have.
My example (simplified):
const formSchema = z.object({
userId: z.string(),
// other values
});
type Form = z.infer<typeof formSchema>;
const Component = () => {
const [searchParamUserId, setSearchParamUserId] = useSearchParam("userId");
const defaultValues: Partial<Form> = {
userId: undefined,
};
const form = useAppForm({
defaultValues: defaultValues as Form,
validators: {
onMount: formSchema,
onChange: formSchema,
onSubmit: formSchema,
},
});
return (
<form.AppField
name="userId"
listeners={{
onMount: ({ fieldApi }) => {
if (userId) {
fieldApi.setValue(searchParamUserId);
}
},
onChange: ({ value }) => setSearchParamUserId(value),
}}
>
{(field) => (
<UsersSelect
selected={field.state.value}
onSelect={(nextUserId) => {
// Clicking on the same user should reset value to undefined
if (nextUserId === field.state.value) {
form.resetField("userId");
// Unfortunately, resetting field doesn't emit a listener event
setSearchParamUserId(undefined);
} else {
field.setValue(nextUserId);
}
}}
/>
)}
</form.AppField>
);
};
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no files or tests; start by tracing the resetField entry point and the field listener handling around onChange in the example. Compare reset behavior with ordinary setValue changes, then identify the existing form or field event tests to extend. Done means resetting a field or form produces the documented event needed by listeners.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100