react-hook-form: isValid computed incorrectly when dynamically adding required fields

Describe the bug The isValid state lags one tick behind the actual validation state when having dynamic form fields registered later.

To Reproduce Steps to reproduce the behavior:

Go to https://codesandbox.io/s/dawn-tree-yrwfk
Switch between the two radios (“Bank Transfer”, which is valid instantly and “Debit”, which requires more fields, hence invalid)
See error

Note: when I blur the radio after changing it, the isValid gets rerendered and is then correct, but right after the toggle its incorrectly “false”

Codesandbox link https://codesandbox.io/s/dawn-tree-yrwfk

Expected behavior The isValid state should be rerendered immediately after registering new fields.

Desktop (please complete the following information):

OS: Win 10 1909
Browser: Chrome 78.0.3904.87, Chromium Edge 80.0.320.0

Thanks for the awesome project! Nice work ❤️

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 26 (26 by maintainers)

Commits related to this issue

fix #447 when input removed — committed to react-hook-form/react-hook-form by bluebill1049 5 years ago

Most upvoted comments

…so you fix issues before they are posted 😛 That’s lightning-fast!

krnlde on Feb 28, 2020

aha, @krnlde thank you. I will sort out this during lunchtime 😃 I need to get off my bed now.

bluebill1049 on Nov 3, 2019

Works in 4.9.9-beta.3 🎉 🎉 🎉 You’re the fastest man on github 😛

krnlde on Feb 28, 2020

Hey hey hey! I’m back again with a wonderful variation of this bug! This time it’s a little more complicated to reproduce, but it’s the same error as the original title states. I’m using the latest version 4.9.8 of RHF.

If I have nested error objects (as recommended in the API docs) I can produce an invalid state, despite being valid.

To reproduce:

Go to this sandbox: https://codesandbox.io/s/great-leakey-resm7
Notice isValid: false correctly
Activate the “Bank transfer” radio
Notice isValid: true correctly
Activate the “Direct Debid” radio
Notice isValid: false correctly
Change something in an input field that just appeared and then delete it (this part is crucial)
Notice isValid: false correctly
Activate the “Bank transfer” radio again which removes the debit inputs from the DOM and also should remove their required-ness
Notice isValid: false incorrectly

If you do not do step 7 (inserting something and then removing it), the errors object will be empty and therefore the bug won’t appear. I got the same result when hitting the “Validate” button at this step.

The reason is, that the errors Object still holds an empty debit property, which looks like this: {debit: {}}. My guess is that isValid is calculated by isValid = !Object.keys(errors).length or something.

The solution would be to remove the dangling, empty nest-object.

You can peek in the console, I output the errors object in each rerender. This helps to see the {debit: {}} as a result of the above steps.

krnlde on Feb 27, 2020

lol not really @krnlde i had the fix in beta just haven’t released the fix. that’s why.

bluebill1049 on Feb 28, 2020

much appreciated your help and support @krnlde i will add your name in the release note. thank you ❤️

bluebill1049 on Dec 9, 2019

I can confirm it works with 3.28.15-beta.2 🥇

working example: https://codesandbox.io/s/dreamy-swartz-y5hgp

krnlde on Dec 9, 2019

Hey man 😃 This error is back again in 3.28.14 and 3.29.0-beta.1.

See for reference: https://codesandbox.io/s/interesting-merkle-0yvw7

krnlde on Dec 8, 2019

Now I have to get out of bed and try it 😄 …

krnlde on Nov 4, 2019