`Warning: A component is changing an uncontrolled input to be controlled` error in NextJS after following readme

[nikitavoloboev]

Version Number

^1.0.6

Steps to reproduce

Have repo here: https://github.com/nikitavoloboev/test/tree/main/next-13

Can run pnpm i and pnpm run dev.

Actual code with inputs here: https://github.com/nikitavoloboev/test/blob/main/next-13/pages/index.tsx

I am not sure what I am doing wrong but every time I try to write in the input boxes I get this error:

I expanded on code that is in readme, perhaps I missed something? Repo was started from latest Next 13 starter.

Thank you.

Expected behaviour

No warning in console.

Relevant log output

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

[iway1]

So this is a normal occurence when using rhf/react doesn't really have to do with the library.

The problem is that the first time you render your input, the value is undefined so React doesn't know the input is supposed to be controlled (b/c value is undefined).

So when you type it goes from uncontrolled to controlled and react doesn't like that.

I will update the docs to make it more obvious how to avoid this, though. 😊

To fix you can either pass a default value via defaultValues on the form, or in the text field you can do value={field.value?field.value:""} I typically always do this

[iway1]

docs updated, thanks for opening this 🙏