Nested conditional components have a weird behaviour with setValue
when using shouldUnregister
#12427
Unanswered
klastoferix
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hey there,
first of all, thanks for providing this library which surely has made my work easier!
I have a rather complex form with the following requirements:
I managed to implement the form using Components that wrap around MUI elements more or less like shown in the codesandbox provided by the RHF documentation. In order to not include unmounted fields in the submitted object, I found the option
shouldUnregister
inuseForm()
to work well. However, I am having issues importing data into the nested parts of the form usingsetValue
.I created an example showcasing my issue in a CodeSandbox.
As you can see in the CodeSandbox, I provide three examples with each more or less the same form structure. Each example form has a button to "import" a (hardcoded) state of the form using
setValue
for each field. Click each button multiple times to see the effect for each case.shouldUnregister = true
, only the changes on the highest layer are applied on the first click ofImport
. For each subsequent click, as the nested components of the next layer are now mounted, the content of the next layer is applied too.shouldUnregister = true
, all fields are filled in properly on the first clickshouldUnregister = true
but with classic <input>s instead of components, the import feature also works properlyFor this reason, I believe that I haven't fully understood how <Component>s work or they have some issues properly working together with
shouldUnregister
.Did I miss anything on the correct usage of Components? Did I take a bad approach for my problem?
I would be glad for any hints!
Beta Was this translation helpful? Give feedback.
All reactions