'React-Hook-Form - defaultValues not updated are not registered

I have a form who get updated directly when an user change an input. For that, I use the onBlur method.

When I change an input from the defaultValue, it save it in the DB, but it doesn't take the whole form data with it. Some fields are 'registered' (like the field Titre) and are updated but not all of them.

I would like that every input register in the form and not only the one I changed. I need that because I use reset() in onSubmit() and it makes some field become empty.

What I'm a missing here?

const {
    control,
    register,
    handleSubmit,
    reset,
    formState: { isDirty, errors },
} = useForm({
    mode: "all",
});

Function to submit the form

const onSubmit = (data: any) => {
    console.log(data);
    for (const key in data) {
        if (data[key] === undefined) data[key] = "";
    }

    if (!isDirty) return false;
    agent.Spectacle.updateSpectacle(data)
        .then(() => dispatch(updateSpectacle(id)))
        .catch((error) => console.log(error))
        .finally(() => reset(data));
};

This input is automatically registered:

<input
   type="text"
   className="form-control"
   {...register("titre", { required: true, minLength: 3, disabled: isNotEditable })}
   defaultValue={spectacle?.titre}
   onBlur={handleSubmit(onSubmit)}
/>

This input is not automatically registered so if I update the title, 'data' will not contain any value when the function onSubmit in trigerred :

<input
   type="date"
   disabled={isNotEditable}
   className="form-control"
   defaultValue={spectacle?.date_Spectacle}
   {...register("date_Spectacle")}
   onBlur={handleSubmit(onSubmit)}
/>

This input works too :

                                    <Controller
                                        name="id_Usr"
                                        control={control}
                                        render={({ field: { onChange, value, onBlur } }) => (
                                            <Select
                                                isDisabled={isNotEditable}
                                                isClearable={true}
                                                isSearchable={true}
                                                options={optionsUsers}
                                                value={optionsUsers.find((c) => c.value === value)}
                                                onChange={(val) => onChange(val?.value === undefined ? "" : val?.value)}
                                                onBlur={handleSubmit(onSubmit)}
                                                noOptionsMessage={() => "Aucun élément trouvé"}
                                            />
                                        )}
                                        rules={{ required: true }}
                                        defaultValue={
                                            spectacle?.id_Usr?.toString() === undefined ? "" : spectacle?.id_Usr?.toString()
                                        }
                                    />


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source