You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
When using a <Form> component inside a <Modal>, and when using a library like react-hook-form for validations, all inputs get cleared and the validation message is shown on the wrong field on form submit.
Expected Behavior
The error should be shown for the correct field, and inputs should not be cleared on tabbing from 1 field to another.
Enter only 1 input, and click on the Submit button.
Watch both fields show error messages, and both inputs being cleared.
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 @chakra-ui/core 0.8.0, Node 14.1.0
Additional context
I'm not sure if this is a bug on the RHF side, 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
The text was updated successfully, but these errors were encountered:
paambaati
changed the title
[Modal] Weird issues when using Form inside a Modal
[Modal] Inputs cleared on validation when using Form inside a Modal
May 31, 2020
Describe the bug
When using a
<Form>
component inside a<Modal>
, and when using a library likereact-hook-form
for validations, all inputs get cleared and the validation message is shown on the wrong field on form submit.Expected Behavior
The error should be shown for the correct field, and inputs should not be cleared on tabbing from 1 field to another.
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 -
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):
@chakra-ui/core
0.8.0, Node 14.1.0Additional context
I'm not sure if this is a bug on the RHF side, 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
The text was updated successfully, but these errors were encountered: