Using defaultValues containing null causes an error

[bubblekovrik]

Problem
Setting defaultValues which contain some null values and a Controller component produces an error in the console:

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components

The null values are received from the api response.

Codesandbox link
https://codesandbox.io/s/suspicious-mahavira-zvlvo

Screenshots

I'm using custom input controls that prevent the rendering when receiving a null value. Are there ways to avoid setting the values to null from the defaultValues? Setting the render property instead of as in the Controller component may solve the problem, but it will requires manual configuration of the input component.

[bluebill1049]

- return <Controller {...props} defaultValue="" as="input" />;
+ return <Controller {...props} as="input" />;

you don't need defaultValue there, because you already defined defaultValues at useForm.

[bluebill1049]

middleName: undefined is the reason, change to null or ''

[bubblekovrik]

It will remove the warning message, which is annoying but doesn't break anything, but the problem with null values for inputs remains.

[bluebill1049]

do a watch or useWatch to toggle that input.

[bubblekovrik]

Not sure if I got it right. Should watch/useWatch set the specified defaultValue before the first render?

[bluebill1049]

yes at the current version it's safer to provide a default value.

[leapful]

@bubblekovrik @bluebill1049

Another workaround is to use prop "render" of Controller to set default empty string on attribute "value" of input.

Working sample: https://codesandbox.io/s/sparkling-pine-dolzg?file=/src/TextField.js

[NarenderDhamarlapally]

first time it is getting null in defaultvalue.
but it is not working as dirty.
firsttime is null .second time is "" empty string .
when i remove value from the textfield