Form values reset to default after submit clicked

[gajo357]

To Reproduce
Using Ionic and latest versions of everything.

1. Change to input values to something illegal
2. Click the submit button
3. All input fields get reset to default

Codesandbox link (Required)
Using the sandbox, just update the dependencies to latest and enable the Submit button even if the input is invalid.

"dependencies": { "@ionic/react": "5.0.7", "@material-ui/core": "4.6.1", "react": "16.13.0", "react-dom": "16.13.0", "react-hook-form": "^6.0.0", "react-hook-form-input": "1.1.10", "react-scripts": "3.4.1", "react-select": "3.0.8" },

<IonButton type="submit">submit</IonButton>

Expected behavior
I expected to continue where I have left off, not to be reset to initial values.

[bluebill1049]

you can't just take a codesandbox (from someone else) and update to the latest version (major version) and expect it's working. especially when there are breaking changes. the codesandbox was made probably before v5, react-hook-form-input is already part of the main repo. can you build one codesandbox by yourself with the latest version and see if you can reproduce any problem.

[gajo357]

Thanks @bluebill1049 for prompt reply.
I have created a sandbox from scratch and using react-hook-form-input in it.

[bluebill1049]

Don't use react-hook-form-input, please use Controller instead. Take a look this section https://react-hook-form.com/api/#Controller

there is a codesandbox as well: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r

[gajo357]

Controller does not have the onChangeName property and I do not know how to connect it to an Ionic input component (which triggers onIonChange event). Without it, the form's values never update.

[gajo357]

I have used the Controller initially, but then switched to RHFInput because the controller had same issues.
It does not have onChangeName property, and the form does not re-render when I change the input.

It would be lovely to have a working sample with Ionic and react-hook-form, with or without react-hook-form-input.

[pogo19]

I've updated to v6 and apart from FormContext to FormProvider change it looked OK. But my reset in useEffect caused submit to send default values (in my case empty object) to onSubmit.

[bluebill1049]

I've updated to v6 and apart from FormContext to FormProvider change it looked OK. But my reset in useEffect caused submit to send default values (in my case empty object) to onSubmit.

do you have code example? with reset problem?

[gajo357]

I've updated to v6 and apart from FormContext to FormProvider change it looked OK. But my reset in useEffect caused submit to send default values (in my case empty object) to onSubmit.

I am not sure I understand your problem @pogo19 . In my codesandbox there is no FormContext, FormProvider nor reset.

[pogo19]

I've updated to v6 and apart from FormContext to FormProvider change it looked OK. But my reset in useEffect caused submit to send default values (in my case empty object) to onSubmit.

do you have code example? with reset problem?

Here it is: https://codepen.io/pogo19/pen/OJMzBMd?editors=0011
If you comment out the reset line, it works well. It used to work with 5.x.

Note that the reset only happens with initial form rendering, not during submit ;)

From another usage elsewhere in my code, I need to use that reset because I have the defaultValues stored in react state (first null, later updated from REST API) and I want to update the form with values on state change.

[pogo19]

I've updated to v6 and apart from FormContext to FormProvider change it looked OK. But my reset in useEffect caused submit to send default values (in my case empty object) to onSubmit.

I am not sure I understand your problem @pogo19 . In my codesandbox there is no FormContext, FormProvider nor reset.

I had a problem and it seemed to me it is similar to what I do experience after 5.x to 6.0.0 update of react-hook-form. If it is not related, I will open a new issue.

[bluebill1049]

I don't think there is an issue here, I will move this into the discussion.

[bluebill1049]

@pogo19 can you create a codesandbox for your problem? (keep it simple if possible)

[pogo19]

@bluebill1049 We had a long weekend over here in Czech Republic. Here it is: https://codesandbox.io/s/react-hook-form-reset-problem-37uir?file=/src/App.js

I hope I have simplified it to the bone. The problem persists. It doesn't work (values object printed to console is empty). If you comment out the reset(..) line, it works.

@gajo357 I've got rid of FormProvider and useFormContext in my example ;)

[gajo357]

Thanks for the effort. It gave me ideas and now everything works fine. Really nice library to use.

[bluebill1049]

Thanks, this was reported yesterday as an issue as well, I have updated the doc related to this problem.

[pogo19]

OK, thanks.

[qiluo]

To original question, I came into same issue. Then I figured out Controller v6 dropped onChangeName and replaced with render props, used render to connect inner input change and everything went ok