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.

[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
})