issue: Controlled inputs initiated with null don't get reset

[Moshyfawn]

Version Number

7.24.1

Codesandbox/Expo snack

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

Steps to reproduce

1. Go to this CSB
2. Enter any value into the Room input
3. Click on Submit button
4. See the form value reset under the Room input, but the actual input value hasn't been reset

Expected behaviour

Controlled inputs get properly reset with it's default set to string or null as per this comment and RHF docs on controlled inputs

See #7589 for context

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

cc @msageryd

[Evalon]

You need to provide a string to the input if you want it to use in a controlled mode. This is not related to react-hook-form but to react (you can see the warning in the console). So when you call reset in your example it's already in controlled mode and cannot be used with null/undefined: example
Also, if you want to reset all fields to corresponding defaultValues you need to call reset() (without object) or provide defaultValues. If you want to reset only one field to default value you can use resetField.

[bluebill1049]

thanks, @Moshyfawn & @Evalon that's correct.

[Moshyfawn]

First of all, you're completely right. I got stuck thinking about the "not undefined" default value, forgot about React rules (also, didn't notice the console warning, my bad).

Also, the reset without args point - was testing things, sry!

Is it a good idea to update the controller docs notes to mention null as a "no-no" for controlled input's default value?

Setting defaultValue inline or at useForm can not be undefined.

[bluebill1049]

@Moshyfawn i will update it now.

[bluebill1049]

updated: react-hook-form/documentation@ac4caef deploying

[Evalon]

@bluebill1049 I think it's should be possible that defaultValues contains null for more complex cases (select or some custom controls). Just text inputs cannot be used with null.

[bluebill1049]

correct @Evalon hmmm how can I word it better...

[bluebill1049]

this is what i going with

Setting <code>defaultValue</code> inline or at{" "}
<code>useForm</code> can not be <code>undefined</code>, and
<code>null</code> is also invalid for native input such as text
box.

[bluebill1049]

thank you guys 🙏 closing this issue.

[msageryd]

Thanks for the clarification. I will try to adopt to this.

On a side note, React-Native seems capable of handling null as field values. I am now initializing the form with a default object where all fields are set to null. When I call reset() all fields are cleared both in RHF and in the UI.

I guess that I should not rely on this if I want to use my form engine with web components going forward.

Edit:
@bluebill1049 @Moshyfawn @Evalon
Here is a snack showing reset() with null values in React-Native. If you run the snack "on web" (i.e. React-Native-Web) the reset does not work. If the snack runs on iOS the reset works with null values. No wonder I got confused =)

https://snack.expo.dev/@msageryd/rhf-reset-example

edit again:
Here is @Evalons example ported to react-native. As you can see this is clearly a web vs native thing. Nothing RFH can do anything about.
https://snack.expo.dev/@msageryd/forlorn-mixed-nuts

[blayvant]

@bluebill1049 How would you deal with a situation where the controlled field doesn't accept an empty string as a value? I'm trying reset the value of a Prime Calendar component and setting the value to a string results in the following error:
Type 'string' is not assignable to type 'Date | Date[] | undefined'