Form inputs get cleared on validation inside a Chakra-UI modal

[paambaati]

Describe the bug
When using a Chakra-UI <Form> component inside a <Modal>, and with RHF for validations, all inputs get cleared and the validation message is shown on the wrong field on form submit.

To Reproduce

See https://codesandbox.io/s/stupefied-poitras-11y82?file=/src/App.js - and its fullscreen version - https://11y82.csb.app/

The issue is evident in the fullscreen version -

1. Click button to open modal.
2. Enter only 1 input, and click on the Submit button.
3. Watch both fields show error messages, and both inputs being cleared.

Expected Behavior
The error should be shown for the correct field, and inputs should not be cleared on tabbing from 1 field to another.

Suggested solution(s)
Honestly, I don't know. I'm creating this issue as a starting point so I can collect more information about why this happens.

Desktop (please complete the following information):

• OS: macOS 10.14.6
• Browser Chrome 85.0.4158.4
• Version react-hook-form 5.7.2, @chakra-ui/core 0.8.0, Node 14.1.0

Additional context
I'm not 100% sure where the bug originates from (Chakra-UI or RHF), but I did try to isolate the issue by building another CodeSandbox with the same kind of logic (without Chakra-UI) and it seems to work fine - see https://codesandbox.io/s/sleepy-diffie-kuwxx?file=/src/App.js:360-411

However, in the interest of understanding this deeper, so @bluebill1049 if you have any insights, I'd love to know.

I've also created a similar issue on the Chakra-UI repo - see chakra-ui/chakra-ui#784

[bluebill1049]

Take a look this issue: #1709 (comment)
there is a codesandbox there as well.

[paambaati]

@bluebill1049 I'm not sure which part of that example I should use. Are you recommending using setValue() on the modal inputs' onChange?

[bluebill1049]

@bluebill1049 I'm not sure which part of that example I should use. Are you recommending using setValue() on the modal inputs' onChange?

#1709 (comment)

[paambaati]

@bluebill1049 Thanks, I am looking at that specific CSB, but I'm finding it hard to understand where the solution lies.

If you mean the Modal should have its own form, then in my case, it already does. I don't see much else of a difference in terms of what that and my examples are doing.

[bluebill1049]

@bluebill1049 Thanks, I am looking at that specific CSB, but I'm finding it hard to understand where the solution lies.

If you mean the Modal should have its own form, then in my case, it already does. I don't see much else of a difference in terms of what that and my examples are doing.

Your codesandbox has only had a text: 'test'. The problem is when form sit in a modal, you need to save the form values before close the modal, as inputs get unmount will result unregister your inputs, same as native form inputs' behavior.

[paambaati]

@bluebill1049 Right, although my issue happens before I close the modal. If you run the linked app (https://11y82.csb.app/), you'll notice that the modal, on submit (it doesn't close/unmount at all), exhibits this behavior.

I'll list down the steps to clearly see the issue —

1. Open modal by clicking on 'Open' button.
2. Don't enter any inputs, and click modal's Submit button.
3. Notice validation errors on both fields. This is expected behavior.
4. Now enter input on any one field. Leave the other field empty.
5. Now click modal's Submit button again.
6. Now notice that the input entered in step 4 disappears.

What you see in step 6 is the problem. The modal hasn't closed/unmounted at any point between steps 2 - 6.

[bluebill1049]

Can you do a version without the .map? i am not sure this is an issue with RHF, but i am happy to help and investigate the root cause.

[paambaati]

@bluebill1049 Thanks a lot for helping!

I built one without a .map(), and it has the same issues — https://mnskb.csb.app/ (source at https://codesandbox.io/s/jolly-albattani-mnskb?file=/src/App.js)

[bluebill1049]

Try one without isInvalid={Boolean(errors?.inputs?.[0])}, worth to raise a question at Chakra-UI is it the component gets completely a remount when that flag changes.

[paambaati]

@bluebill1049 You were right! Removing the isInvalid prop on <FormControl> fixes the issue; but now I'm stuck with no validation messages.

[paambaati]

@bluebill1049 Do you have any ideas around how to solve this? Is preventing a remount the only solution, or is there something I can do with state/context to fix this from outside the library?

[bluebill1049]

@bluebill1049 Do you have any ideas around how to solve this? Is preventing a remount the only solution, or is there something I can do with state/context to fix this from outside the library?

I don't have control over how they render an input, you may have to check at their repo for a solution.

I would look at the solution to show error without using that wrapper for now.

[DaniAkash]

The issue happened because the <EditModal> component is created as a function inside the <App> component & the hooks local to the App component are used inside EditModal. This is an antipattern in React & can be solved by moving EditModal outside of the App component & passing the required values as props.

The fixed form can be found here - https://codesandbox.io/s/hook-form-gp-discussion-xl2qb?file=/src/App.js

[paambaati]

Thanks a ton @DaniAkash!

[bluebill1049]

Thanks @DaniAkash !