can not reset undefined to a value

[xihangzhou]

reset({ position: undefined });

like above, this position value can not be reset into undefined。

I think it is inconvenient if react-use-form transform undefined unconsciously in both reset or defaultValues.

I really hope this can be fixed.

[bluebill1049]

we don't support input to be undefined. you can set input to standard to empty string or null.

[Fi1osof]

we don't support input to be undefined. you can set input to standard to empty string or null.

This is non-standard behavior. I will explain.

type Item = {
  name: string | null | undefined;
};

const item: Item = {
  name: "",
};

console.log(JSON.stringify(item)); // {"name":""}
item.name === ""; // true

item.name = undefined;

console.log(JSON.stringify(item));  // {}
item.name === undefined; // true

item.name = null;

console.log(JSON.stringify(item));  // {"name":null}
item.name === null; // true

This is correct behavior.

With react-hook-form

type Item = {
  name: string | null | undefined;
};
 
const form = useForm<{
  name: string | null | undefined;
}>({
  defaultValues: {
    name: ""
  }
});


let item: Item = form.getValues()

console.log(JSON.stringify(item)); // {"name":""}
item.name === ""; // true

form.setValue(name, undefined)
item.name === ""; // true because got default value
item.name === undefined; // false

console.log(JSON.stringify(item));  // {"name":""}

In this case i can not remove name via react-hook-form never.

[AndrewEastwood]

@Fi1osof have you tried to use resetField with the undefined option so far ?

[tatsmaki]

Component should not switch between controlled or uncontrolled behaviour. And undefined is an uncontrolled value in react.
Putting it together the answer will be to set correct useForm defaultValues.
position: '' or position: { x: 0, y: 0 } or position: null will work.

[Fi1osof]

Component should not switch between controlled or uncontrolled behaviour. And undefined is an uncontrolled value in react. Putting it together the answer will be to set correct useForm defaultValues. position: '' or position: { x: 0, y: 0 } or position: null will work.

For controlled components you pass value={item.value || ''}. This is correct practice for react. But you should have bot item.value === undefined and item.value === null values for a chose.

[tatsmaki]

Nope, I don't pass value like that if register or controller is used. And setting the defaultValues is a better practice.
https://react-hook-form.com/docs/useform#defaultValues

it is recommended to use defaultValues for the entire form.

You should avoid providing undefined as a default value, as it conflicts with the default state of a controlled component.

Also see https://react-hook-form.com/docs/useform/reset

For controlled components you will need to pass defaultValues to useForm in order to reset the Controller components' value.

So if you will follow the docs you can get nice results.

useForm({
    defaultValues: {
        name: props.name || '',
        position: props.position || null
    }
})

In case you want to reset something

reset({
     name: '',
     position: null
})

[ianpaschal]

This seems super broken to me. I have the following scenario:

const schema = z.object({
  tournament_pairing_id: z.string().uuid(),
  player_0_id: z.string().uuid(),
  player_1_id: z.string().uuid(),
});

export type FormData = z.infer<typeof schema>;

const form = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      tournament_pairing_id: undefined, // Should be null
      player_0_id: undefined, // Should be null
      player_1_id: undefined, // Should be null
    },
    mode: 'onSubmit',
  });
  
   // Reset player values if pairing is changed
  useEffect(() => {
    reset((prev) => ({ ...prev, player_0_id: null, player_1_id: null }));
  }, [reset, tournament_pairing_id]);

Trying to reset to null gives me a TS error. So does undefined.

Ideally I'd actually set the default values to null as well, but that also throws a TS error.

IMO: defaultValues and reset should not be checked against the form's type. That type represents valid form data than be submitted, not the default values.

I can sort of work around with using empty strings to mean null but then these need to be recursively converted before submit on a large form which is ugly. On top of the ugly fact that '' shouldn't be used for null in the first place.

[BrendanC23]

This is an old comment, but here's a solution:

You can use Zod to differentiate between the input type of the form (what values are initially allowed) and the output type (what values are necessary so that the form can be submitted). In your case, null should be a valid input value but should not be allowed in the submitted results.

const schema = z.object({
    tournament_pairing_id: z.string().uuid().refine((val) => val !== null),
    player_0_id: z.string().uuid().nullable().refine((val) => val !== null),
    player_1_id: z.string().uuid().nullable().refine((val) => val !== null),
});
  
type InputType = z.input<typeof schema>;
type OutputType = z.output<typeof schema>;

const form = useForm<InputType, undefined, OutputType>();

[NicholasKuchiniski]

So... there is no way of setting the field value back to undefined ? Not even setValue worked. I share zod schemas between frontend and backend, tt does not make sense to type something as null instead of undefined in the backend and i don't want to extend every schema in my code just to convert it again to undefined when parsing it to json to send the request to the server.

[tarikyildizci]

I think it is weird that there is only one type for both before and after submit. It feels natural and intuitive to have empty fields in web forms, especially in default states and dependent fields where changing one clears the other. I agree with @ianpaschal about nullable types, all methods other than handleSubmit accepting | null feels natural to me. Maybe this could be added as an option?

[BrendanC23]

I think it is weird that there is only one type for both before and after submit.

React-hook-form allows you to have separate input and output types. useForm() takes generic arguments for the input and output types (see the docs):

export type UseFormProps<
  TFieldValues extends FieldValues = FieldValues,
  TContext extends object = object,
  TTransformedValues extends FieldValues | undefined = undefined,
>

You can model these in Zod like in this answer, which allows null to be used for an input schema but force a value before the form can be submitted.

@bluebill1049 It may be worth clarifying the input/output resolver types more clearly in the docs, as there's lots of confusion around it.

[tarikyildizci]

That's just what I needed, thanks a lot!

[teddybee]

I ran into similar problem.
I have to update the form if the defaultvalues are changing. I did it with a useEffect and reset(defaultvalues).
The suggested null is not working if the optional field changes from string to undefined. I explicitly convert the undefined to null:

 useEffect(() => {
    form.reset({
      ...defaultValues,
      name:
        defaultValues.name !== undefined ? defaultValues.name : null,
    });
  }, [form, defaultValues]);

[lucashfreitas]

For whoever is facing this issue, use this wrapper when using form.reset

form.reset(replaceUndefinedWithNull(yourFormValuesWithUndefinedValues))`

form.reset(replaceUndefinedWithNull(yourFormValuesWithUndefinedValues))`

/**
 * We need this to use with react hook form.
 * Setting objects to undefined on form.reset will be ignored and the field won't be updated.
 * This function will replace undefined with null
 */

export function replaceUndefinedWithNull<T>(obj: T): T {
  if (Array.isArray(obj)) {
    return obj.map(replaceUndefinedWithNull) as unknown as T
  } else if (obj !== null && typeof obj === "object") {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const newObj: any = {}
    for (const [key, value] of Object.entries(obj)) {
      if (value === undefined) {
        newObj[key] = null
      } else {
        newObj[key] = replaceUndefinedWithNull(value)
      }
    }
    return newObj
  }
  return obj
}