Problem with re-render when form has tabs

[marcelo-tm]

Hi everyone, I'm having an issue with a form I'm building. It's composed of several tabs, that are mounted and unmounted when the users clicks on the respective button, I'll try to make a list below with the issues:

• When I fill the "Name" input, the value is not populated on the values (getValues) object on blur, only if I press the submit button.
• When I change tabs, the previous values are lost
• When I change an option on the "Type" component, it's child input is not shown on blur also, only after I submit the form.

What I found out:

• If I mark some component as required (with ref={ register({ required: true }) }, the values are show on the values object on blur, but the "Type" component shouldn't be required.

I've made a codesandbox with the sample code: https://codesandbox.io/s/react-hook-forms-tabs-i76i7?file=/src/App.js

[bluebill1049]

• shouldUnregister: false
• https://github.com/react-hook-form/react-hook-form/tree/master/examples (search Tabs Form (MUI))

[marcelo-tm]

I think I made it work with your example! Thank you very much!

Code updated: https://codesandbox.io/s/react-hook-forms-tabs-i76i7?file=/src/App.js

[bluebill1049]

awesome.