React-hook-form: Conditional Fields cause form to completely fall over (have reproducible solution for you)

[NickCullen]

Describe the bug
When using conditional fields with controlled custom components, it causes all other fields to unregister and re-register themselves thus resetting the form.

To Reproduce
Steps to reproduce the behavior:

1. Set checkbox to 'no'
2. Select item 1 from select box
3. Select item 2 from select box
4. Conditional field will now appear as item 2 is selected
5. Type anything into the text box
6. Remove item 2 from select box
7. Add item 2 back into the select box
8. Type into the text box and watch the form reset

Codesandbox link
Not got a codesandbox account but you can find the code here:
https://github.com/NickCullen/react_form_conditional_field_error

Expected behavior
The form not to reset - but only the value for the conditional field when removing item 2 from the list to reset.

Desktop (please complete the following information):

• Windows
• Chrome
• Version 79

Additional context
npm install
npm start
http://localhost:3000/

[bluebill1049]

can you please create a codesandbox?

[NickCullen]

Sure, here you go:
https://codesandbox.io/s/dawn-smoke-jc39b?fontsize=14&hidenavigation=1&theme=dark

[bluebill1049]

can you try out Controller see if this solves the issue? for your InputTextBox component.

https://react-hook-form.com/api#Controller

[NickCullen]

Unfortunately I started out with the controller and had more troubles.

On 20 Jan 2020, at 06:44, Bill [e-mail] wrote:

can you try out Controller see if this solves the issue?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

[bluebill1049]

what's the trouble @NickCullen ?

[bluebill1049]

find the root cause: https://codesandbox.io/s/competent-yonath-fkxuc
patching it.

[NickCullen]

Sorry I’m on my phone and don’t have the resources to whip up an example.

Basically, this bug would still happen but also when I called form.reset(dtoValuesFromServer); the form would reset to the first value that went into the controller rather than the values I was passing into form.reset if that makes sense.

Personally, I much prefer the register/unregister version in our code (as I’ve seen it documented like that on your API guide) as it gives us a lot more control and flexibility.

I am fairly confident that if I swap that conditional textbox to another component (I’ll try it with another radio option) it will still cause the same issue.

I’ll add more verbose logging on the useEffect for form.register to and you’ll notice ALL inputs unregister then re register themselves and default back to the values passed into useForm to begin with (so perhaps this is actually related to the incorrect behaviour I saw when using the Controller and form.reset) although in my current instance I’ve sent you guys I’m not using form.reset method at all - but that’s just a heads up.

On 20 Jan 2020, at 08:08, Bill [e-mail] wrote:

what's the trouble @NickCullen ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[bluebill1049]

thanks @NickCullen for the detailed reply and codesandbox. It's good you prefer the custom register, and i agree it will give you better control. i have found the bug and patching it. the above codesandbox should be working now. let me know if you still encounter issue.

[NickCullen]

Amazing!!! Thank you for being very prompt also.

Out of interest, what was the issue?

Kind Regards,
Nicholas Cullen

On 20 Jan 2020, at 08:27, Bill [e-mail] wrote:

thanks @NickCullen for the detailed reply and codesandbox. It's good you prefer the custom register, and i agree it will give you better control. i have found the bug and patching it. the above codesandbox should be working now. let me know if you still encounter issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[bluebill1049]

Amazing!!! Thank you for being very prompt also. Out of interest, what was the issue? Kind Regards, Nicholas Cullen
…
On 20 Jan 2020, at 08:27, Bill @.*> wrote: thanks @NickCullen for the detailed reply and codesandbox. It's good you prefer the custom register, and i agree it will give you better control. i have found the bug and patching it. the above codesandbox should be working now. let me know if you still encounter issue. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

it was due to unnecessary useCallback dependency, small thing trigger big effect 😢

[NickCullen]

@bluebill1049 Apologies, I don't think this is actually completely fixed :(

If you follow the steps then type into the box a second time you can notice the radio option reset back to "yes".

Also, at this point - if you change the value of the radio option back to no, the text in the conditional field will reset and you can no longer alter the value of the radio option.

This happens in the sandbox you sent, also: https://codesandbox.io/s/competent-yonath-fkxuc

[bluebill1049]

hmmm it's working for me. can you send a video of the bug?

[NickCullen]

@bluebill1049 Also I noticed you removed the cleanup to unregister the multi selector from the form on the useEffect but left the text box and radio option cleanup there - was there any reason for this?

[bluebill1049]

oh that's probably why it's working lol

[bluebill1049]

i didn't remove it. can you refresh and double check?

[bluebill1049]

useEffect(() => {
    form.register(props.name);
    console.log("yes/no box register");
    return () => {
        console.log('remove here--')
        form.unregister(props.name)
    };
  }, [form.register]);

still there.

[NickCullen]

https://codesandbox.io/s/dazzling-violet-12tlg

Updated reproducable steps

[NickCullen]

For some reason its gone back to how it was originally with https://codesandbox.io/s/dazzling-violet-12tlg :/

[bluebill1049]

try this codesandbox: https://codesandbox.io/s/competent-yonath-fkxuc ?

[NickCullen]

Just did, and its gone back to how it was originally - any more PR's gone through?

[bluebill1049]

strange it works for me...

let me write it here and test again:

Set checkbox to 'no'
Select item 1 from select box
Select item 2 from select box
Conditional field will now appear as item 2 is selected
Type anything into the text box
Remove item 2 from select box
Add item 2 back into the select box
Type into the text box and watch the checkbox reset back to 'yes'
Change checkbox to 'no'
text in conditional field will dissapear and radio option becomes un-usable

[bluebill1049]

Type into the text box and watch the checkbox reset back to 'yes' didn't happen for me

[NickCullen]

They are the correct steps yeah - although I am seeing the original issue now (and it is using the correct version of form hook)

[bluebill1049]

oh don't use lib, use the ./src folder! hahah it's not published yet.

[NickCullen]

Trying to get a video of it, I am using the one you sent me and I'm seeing the behavior from the start of the issue.

[bluebill1049]

kk thanks. very strange...

[bluebill1049]

either i miss something or wrong code,

[NickCullen]

Here we go: https://codebase8-my.sharepoint.com/:v:/p/nick_cullen/Ed03P99MhP1PvYn_wftY6CUBSGfgpxv4Ic8DFUlu37DmDw?e=Cq5jak

[bluebill1049]

try again with this demo: https://codesandbox.io/s/competent-yonath-fkxuc

maybe i didn't save the file.

[NickCullen]

Thanks @bluebill1049 that's working as expecting, and not loosing state with radio options etc.

In my clients project I have referenced "react-hook-form": "^4.5.7-beta.3" and it is all working as expected. Although you said earlier I wouldn't be able to access these changes via that?

I'm quite confused how it's working in my clients project now :)

[bluebill1049]

lol, clash of betas. i did release a beta which probably include the fix (patch was for next.js)

[NickCullen]

So to confirm this is in that beta branch? :)

Thanks very much for the help!

[bluebill1049]

yes. i will release the patch soon with other fixes.