How to clear all fields? Can't get reset() to work as I want.

[msageryd]

I'm trying to clear my form, but only succeed half the way.
The stored values in RHF is cleared, but the values in my input components are still there.

   reset({});

I have also tried with keepValues: false

   reset({}, {keepValues: false});

If I explicitly set the values to null, the actual input fields gets cleared.

   reset({room: null}, {keepValues: false});

My fields are controlled. I have connected onChange, value and ref. Everything works as it should in the form, but reset mis-behaves or is mis-used by me.

[Moshyfawn]

Should be working properly. See this CSB
Have you set defaultValues for the form?

You will need to pass defaultValues to useForm in order to reset the Controller components' value.

[msageryd]

No I don't have default values. Didn't see that this was required in the docs.

So, there is no way to reset a form without either having default values for all fields or iterate all keys from getValues and create an object with all keys set to null?

I don't want to set defaults for my fields. But if this is required, I'll go ahead and generate a "null-map" as default.

edit: I suppose undefined is better than null. Otherwise I cannot distinguish an "intermediate" checkbox from an untouched.

[Moshyfawn]

On undefined for the default input value see this comment. RHF doesn't support undefined for input value. Also, the <Controller /> RHF docs section mentions this:

• If your form will invoke reset with default values, you will need to call useForm with defaultValues instead of setting the defaultValue on individual fields.
• Setting defaultValue inline or at useForm can not be undefined.

So, there is no way to reset a form without either having default values for all fields or iterate all keys from getValues and create an object with all keys set to null?

I do see the inconvenience it causes you, but I'm afraid RHF needs default values to check whether a form has been modified or not.

Make sure to provide all inputs' defaultValues at the useForm, so hook form can have a single source of truth to compare whether the form is dirty.

As a side not, why wouldn't you want to set defaultValues for your inputs? Each input has it's default anyway. false for checkboxes feels right. (Not trying to debate, genuinely curious)

[bowis]

"As a side not, why wouldn't you want to set defaultValues for your inputs?" Isn't that the purpose of placeholders. Checkboxes are set to false by default either way

[JosueValenciaRobles]

I also think that default values just add unnecessary complexity.
They should be defined by the presentation layer.

[AnshulKhanngwal]

"As a side not, why wouldn't you want to set defaultValues for your inputs?" Isn't that the purpose of placeholders. Checkboxes are set to false by default either way
Hey, Bowis I am creating a functionality that will take dynamic fields in that case I am passing the fields only it is working fine but reset is not working. One way is to pass defaultValues object with fields wherever I am using it but if there is any way to define a common defaultvalues object in the component itself so that I shouldn't have to update all code from wherever I am passing fields.

[msageryd]

Hmm. If I initialize all fields with null, I can clear them with reset().
But if I initialize with undefined which seems more logical, the reset call will not clear my fields.

Isn't this a bit odd?

[msageryd]

I suppose I could change my aproach. The core of my form engine is ported from Final Form. I relied on "undefined" to sort out which fields I should take care of and process in the next stage. I suppose I could solve this with isDirty or isTouched.

I'm not sure where the difference is between your code and my react-native code. But your form is not resettable with null values in the default object.

See CSB fork: https://codesandbox.io/s/reset-controlled-example-forked-q62kd?file=/src/App.tsx

[Moshyfawn]

I should really start providing RN snacks for you instead, sorry. Here's a snack with the reset example.

But you're right, controlled inputs initiated with null value don't get reset properly. I might need to raise an issue

[Moshyfawn]

So, talking in #7590, it seems like the only correct way to have controlled input fields properly reset is to set their default value as a string.
@bluebill1049 can you verify?

[SherothKar]

It worked for me as well with the controller component
reset({
fieldNameA: "",
fieldNameB: ""
})

[NotNikita]

Yep, that works. But if the controlled field is of type number - we may be bumped in type mismatching error from compiler

[chrift]

Im still struggling with this.

I initialise my form with the following. Bear in mind there are other fields in NewListingFormInputs

useForm<NewListingFormInputs>({
    defaultValues: {
      rentalStrategy: RentalStrategyOptions['single-let']
    }
  })

But calls to reset, even with passing in the original defaultValues, have no effect.

How can I get it to reset without having to pass in an empty string for every field?

[leapful]

@chrift

Please provide a minimum codesandbox url to re-produce issue.

[perusopersonale]

I have the same problem, I understand that I can reset all field, giving theme a default value like an empty string, but I don't really want to do that, otherwise the validation logic (zod) won't show required, but something like you passed a string where a number is required. I have also tried to set all values to undefined instead calling reset, but while internally the value is set to undefined, the ui is not updated.

[JosueValenciaRobles]

thanks! i am having the same issue: zod + default values + RHF

[marco-digennaro]

Same problem here, if i specify onClick={() => reset(defaultValues)} it only resets the UI of select, but not those of datepicker nor the input type search, but i if i check on the fields using the "watch" internally is resetted.
i made e sandbox

[Y-k-Y]

In my case the form state still remains even though setting keepStateOptions explicitly.

reset(initialPayload, { keepIsSubmitted: false, keepSubmitCount: false });

[drabelogarner]

Also having trouble with this ... The only way to reset the form right now is to use

reset({
  field1: null,
  field2: null
})

[iskotar]

In my case I have fields field_a, field_b, field_c.
And using reset only for field_b, field_c

reset({
  field_b: null,
  field_c: null
})

actually resets all fields: field_a, field_b, field_c
😄

[DobromirKirovLime]

Same here...

[ruucm]

Has the same issue.

This but happens after the 7.22.0 version

downgrading works to me.

@bluebill1049
https://codesandbox.io/s/react-hook-form-reset-issue-hz34mh?file=/src/App.js

[mimo-lbp]

I have always the issue on 7.46.1.

I need to reset every field in my form like this : form.reset({ bgColor: "#050505", code: "", label: "", order: 0 });

[chrishoermann]

for me the latest version that worked was 7.43.9

[ArchanaSharma95]

Hi, I am still getting this problem in version : 7.45.2,
Is there any solution??

[adarshaacharya]

any update on this, facing issue on "react-hook-form": "^7.47.0"
can't change to null or undefined since using zod for schema validation.

[geh18]

Same issue here.

[PatrickInFrontEnd]

I have found a workaround for this.

import { Path, UseFormReturn } from 'react-hook-form';

export const resetFormByTouchedFields = <ObjType extends object>(
  form: UseFormReturn<ObjType>,
) => {
  const fields = Object.keys(form.formState.touchedFields);

  fields.forEach((field) => form.resetField(field as Path<ObjType>));
};

For some reason resetField method works fine as expected with undefined values. By iterating by keys of touched fields we can reset the form as expected.

[niteshk88]

Thank you very much, it worked. I will just explain my findings here, we must set defaultValue in order for reset and get correct isdirty value and reset isDirty value when value reset to default. To set defaultValue, we have options to set defaultValue with useForm or use reset or resetField. Note- setValue will not set default value.

[adarshaacharya]

btw i tried with rhf and zod and it didn't worked for me.

[weipengzou]

defaultValue should be undefined.

useForm({
defaultValues: {
field1: '',
field2: '',
field3: '',
field4: '',
field5: '',
field6: '',
field7: '',
field8: '',
field9: '',
field10: '',
}
})

that's so bad

[JosueValenciaRobles]

I complete agree @weipengzou

[ethras]

Same issue here, really annoying. I have to reset each field manually in a dirty way (using zod validation)

form.reset({
 field1: null as any,
 field2: null as any
...
})

[deepakdevp]

same for me

[adarshaacharya]

does the method above work without default value too?

[enchorb]

Any updates on a fix here? Resetting by setting every key to null works but is annoying to do all the time especially for dynamic forms.

[DobromirKirovLime]

For me that worked was to pass to reset() the object with the default values. Keep in mind that the key of the values match the name of the inputs.

e.g.

const initialValues = { ... firstName: '' ... }

<input name='firstName' ... />

reset(initialValues)

[DobromirKirovLime]

in the current project we are using chakra-ui, so probably it is not MUI issue

[Mayvis]

@DobromirKirovLime @ilyris I encountered the same issue with shadcn/ui, I use key to force component re-render to fix this problem😅, maybe you can try this?

// remember this need to put outside of the component, you don't want to re-trigger it when component update every time
let formRefresh = new Date().getTime()

const SearchForm = () => {
  <Form {...form}>
    <form key={formRefresh} onSubmit={form.handleSubmit(() => {...})}>
      ...
      <button onClick={(e) => {
        e.preventDefault()
        
        form.reset({
          username: "",
          age: 20
        })
        
        // force re-render
        formRefresh = new Date().getTime()
        
        // if you also want to trigger search
        searchButtonRef.current?.click()
      }}>Clear</button>
      <button ref={searchButtonRef}>Search</button>
    </form>
  </Form>
}

[TiagoPortfolio]

If you are using MUI and you try to reset a field value to null or undefined, I suggest you do this to the value of your TextField component:

value={field.value ?? ''}

This will force the input to be cleared when the value is null or undefined.

[Shemrock3267]

This works well with MUI Textfield

[aniruddhashevle]

Yup this works fine for React Native as well. Using React Native Paper TextInput.

[PaddingtonTheBear]

Really don't understand why this is hard to implement, and it seems like it should be a core part of the library. If I call a method called reset, I want my form to go back to its default, initial state. Even if I pass in my default object to the reset method, it still maintains existing values for things I don't explicitly set to null! Even setting {keepValues:false} does nothing it seems.

For now, to support my use case of dynamic forms, I am doing this to make sure it gets reset properly:

const existingValueReset = form.getValues();
for (let key of Object.keys(existingValueReset)) {
    existingValueReset[key] = null;
}
reset({ ...existingValueReset, ...defaultValues });

Another option would be to use the callback of reset:

reset((prev) => {
    Object.keys(prev).forEach((key) => prev[key] = null);
    return {...prev, ...defaultValues};
});

[weipengzou]

react hook form reset has bug !

use form.reset, form can't rerender select. so u can see it not working.
but form.setValue can working and rerender.

and how to use it for 100% working

just like this

reset single form item

  const onReset = (name: string) => form.setValue(name, "");

reset all form item

import { useFormContext, UseFormReturn } from "react-hook-form";

export const useReset = (form?: UseFormReturn<any>) => {
  const formctx = useFormContext();
  const { getValues, setValue } = form ?? formctx;
  const fields = Object.keys(getValues());
  fields.forEach((field) => setValue(field, ""));
};

[falaxfala]

Lovely! I have some improvements for this one:

import { FieldValues, Path, UseFormReturn } from 'react-hook-form';

export const useReset = <T extends FieldValues>(form: UseFormReturn<T>) => {
  const { getValues, setValue } = form;
  const fields = Object.keys(getValues());

  return (newValues: Partial<T> = {}) =>
    fields.forEach((field) => {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      setValue(field as Path<T>, (newValues[field as keyof T] as any) ?? '');
    });
};

// Usage
const form = useForm();
const { control, register, handleSubmit } = form;
const reset = useReset(form);

reset({formField: 'form_value'}); // Clear with default value
reset(); // Clear everything

[MohammadMrad]

was great, thank you❤

[rgalaxy]

this is working for me. it is crazy that we need to create our own utils to make it work.
for those who need reset partial can use this

import { FieldValues, Path, UseFormReturn } from 'react-hook-form';

export const useReset = <T extends FieldValues>(form: UseFormReturn<T>) => {
  const { getValues, setValue } = form;
  const fields = Object.keys(getValues());

  return (newValues: Partial<T> = {}) =>
    fields.forEach((field) => {
      if (newValues[field]) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        setValue(field as Path<T>, (newValues[field as keyof T] as any) ?? "");
      }
    });
};

// Usage
const form = useForm();
const { control, register, handleSubmit } = form;
const reset = useReset(form);

reset({formField: 'form_value'}); // Clear with default value
reset(); // Clear everything

[htndev]

For me, it falls apart. In our case, null is also a valid value. We treat undefined as an "unset" value. I'd love to get it working as it is supposed to

[Pastushkov]

I found a solution for myself. "react-hook-form": "^7.46.1"
Calling the reset() function clears inputs, but not selects
Here's a solution to clear selects, maybe it will help with inputs

const resetForm = () => {
    reset();
  };
 <form>
          <Controller
            control={control}
            name="startDate"
            render={({ field }) => 
            <Input 
             {...field}
             type="date" 
             className="mt-1 w-28" 
             placeholder="Select date"
             value={field.value ?? null} //add this field
             />}
          />
          <Select
            {...field}
            className="mt-1 w-64"
            placeholder="Start location"
            value={field.value ?? null} //add this field
            options={options}
            isSearchable
            isMulti           
            isClearable
          />
          <button onClick={resetForm}>Reset</button>
        </form>

[zirho]

I am loading the default form values from server side and when the response comes back,
I try to reset the form with the new default value.

It's very inconvenience to do so with current implementation.
Hope this changes in near future.

[mcst]

Without handlying events by yourself:

<form ....
  <button type="reset">Reset</button>
  </form>

You can do further clearing operations by adding an onClickHandler. But the basic input element only get cleared if you set the type to reset, of the reset button.

[JusticeBringer]

This was it! Thank you!

[anand-dehru]

This worked for me:

let defaultValues

const {
reset,
control,
handleSubmit,
formState: { errors }
} = useForm({
defaultValues,
mode: 'onChange',
resolver: yupResolver(schema)
})

useEffect(() => {
defaultValues = {
bankName: '',
name: '',
role: '',
email: ''
}
reset(defaultValues)
}, [reset])

const handleClose = () => {
reset()
}

[beardsleym]

I had this issue with an array of objects not resetting when opening in a dialog. My fix for now.

  useEffect(() => {
    console.log('resetting form', defaultValues); // shows old values
      // deep copy of itemToEdit
    const itemToEditCopy = JSON.parse(JSON.stringify(itemToEdit));
    methods.reset(itemToEditCopy);
  }, []);

[dm0114]

It seemed like the formState wasn't being reflected internally,
so I used flushSync(() => formMethods.reset()), and it worked.

[thinkjrs]

This did the trick for me, as a workaround using Zod. It still doesn't solve the undefined values issue comprehensively but does refresh the form.

I put this at the end of my onSubmit handler with Zod, like so:

async function onSubmit(values: z.infer<typeof formSchema>) {
  flushSync(() => {
    form.reset();
  });
}

Here's the link to the React docs covering flushSync, for those of you digging into this.

And lastly, this issue in the Zod repo may help handle the lack of support for undefined default values in RHF while using Zod.

[Saheb-das]

Here, another solution:

reset() is used in finally block in onSubmit function

function onSubmit(data) {
  try {
    console.log("Form Submitted!");
    console.log(data);
  } catch (error) {
    console.log("errors: ", error);
  } finally {
    reset();
  }
}

[MeDeyvid]

I was having a problem redefining the appearance of the input select, what solved it for me was passing the file.value to the Select value and it needs to have a defaultValue defined.

[toiroakr]

I made zod-empty to create defaultValues.

use like this:

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { empty } from "zod-empty";

const schema = z.object({
  name: z.string().min(1, { message: "Required" }),
  age: z.number().min(10),
  company: z.string().default("Acme inc."),
  hobbies: z.array(z.string()),
});
// create default values with zod-empty
const defaultValues = empty(schema); // => { name: "", age: null, company: "Acme inc.", hobbies: [] }

const form = useForm({
  // pass default values
  defaultValues,
  resolver: zodResolver(schema),
});

[laurentlouk]

alternatively, you can use:

resetField("reference.key", {
   defaultValue: value
}

so you don't have to enter all the fields with the right conditions.
plus it's working well with arrays

[Leo-Henrique]

I generally need to reset the form when submitting, so my solution works well for me:

<form
  className="space-y-8"
  onSubmit={event => {
    if (form.formState.isValid) {
      event.currentTarget.reset();
    }

    return form.handleSubmit(onSubmit)(event);
  }}
  noValidate
>
// ...

Like me, you might think about calling event.currentTarget.reset() inside your submit function, but for some reason React Hook Form handleSubmit changes the onSubmit event, leaving event.currentTarget null. In other words, calling event.currentTarget.reset() in the handleSubmit callback function or after handleSubmit won't work.

[eviannaive]

same issue.
I'm using reset() in my form, but it does not work as intended. When I try to reset some field, all fields in the form are reset instead.🤷🏻‍♀️
reset({id_no:'',birthday:''});

[aress31]

Still one of the major pain points in this library. Every time I need to implement a form that supports both create and edit modes, I end up running into the same issue. I do not understand why it is so difficult to completely reset a form, for example by passing something like defaultValues: undefined.

const methods = useForm<xInsertFormValues | xUpdateFormValues>({
  mode: "onChange",
  resolver: zodResolver(
    isEditMode ? xUpdateSchema : xInsertSchema,
  ),
});

useEffect(() => {
  const resetValue =
    isEditMode && selectedRows.length === 1
      ? ({
          foo: selectedRows[0].foo,
          bar: selectedRows[0].bar,
        } as xUpdateFormValues)
      : ({} as xInsertFormValues);

  methods.reset(resetValue, { keepDefaultValues: false, keepValues: false });
}, [isEditMode, methods.reset, selectedRows]);

[dcporter44]

Do you have a solution you use in the meantime? I'm new to this library and doing this same create/edit functionality and I'm struggling to simply reset the form.