TanStack / TanStack/form

Resetting a field (or a form) doesn't emit an event

Open
#1,570 8 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

v1 v2: needs investigation
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.