-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conditional Fields cause form to completely fall over (have reproducible solution for you) #868
Comments
can you please create a codesandbox? |
can you try out |
Unfortunately I started out with the controller and had more troubles.
… On 20 Jan 2020, at 06:44, Bill ***@***.***> 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.
|
what's the trouble @NickCullen ? |
find the root cause: https://codesandbox.io/s/competent-yonath-fkxuc |
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 ***@***.***> 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.
|
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. |
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 |
@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 |
hmmm it's working for me. can you send a video of the bug? |
@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? |
oh that's probably why it's working lol |
i didn't remove it. can you refresh and double check? |
still there. |
https://codesandbox.io/s/dazzling-violet-12tlg Updated reproducable steps |
For some reason its gone back to how it was originally with https://codesandbox.io/s/dazzling-violet-12tlg :/ |
try this codesandbox: https://codesandbox.io/s/competent-yonath-fkxuc ? |
Just did, and its gone back to how it was originally - any more PR's gone through? |
strange it works for me... let me write it here and test again: Set checkbox to 'no' |
|
oh don't use lib, use the |
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. |
kk thanks. very strange... |
either i miss something or wrong code, |
try again with this demo: https://codesandbox.io/s/competent-yonath-fkxuc maybe i didn't save the file. |
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 :) |
lol, clash of betas. i did release a beta which probably include the fix (patch was for next.js) |
So to confirm this is in that beta branch? :) Thanks very much for the help! |
yes. i will release the patch soon with other fixes. |
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:
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):
Additional context
npm install
npm start
http://localhost:3000/
The text was updated successfully, but these errors were encountered: