React Hook Form Typescript - Tabs
Hello All,
Currently I have setup tabs on my form, and currently the state only saves to the page context when submit is pressed on each tab, however I would like it to save the values between changing tabs without having to use submit or shouldUnregister: false as its deprecated.
I figured I could persist the state on click of the tab (pretty much just run submit form outside of the form), but I don't like this method as I lose metadata like isDirty.
I can do something similar as above, and use getValues(), as well as the metadata and save that, and on tab change rebuild the state manually as well, but that just seems round about for whatever reason, I figure there maybe another way to accomplish this single form nature, or like a background save on change to the page state.
https://codesandbox.io/s/tabs-760h9?file=/src/TabGroup.tsx:845-892
Pretty much using this as a template, only difference is I am using tailwind ui, and searchparams to store which tab is open.
Maybe skipping app level state, and just autosaving to server state similar to the solution here:
https://stackoverflow.com/questions/73614962/how-to-make-a-react-query-with-react-hook-form-autosave
What are your opinions in the matter?
Currently I have setup tabs on my form, and currently the state only saves to the page context when submit is pressed on each tab, however I would like it to save the values between changing tabs without having to use submit or shouldUnregister: false as its deprecated.
I figured I could persist the state on click of the tab (pretty much just run submit form outside of the form), but I don't like this method as I lose metadata like isDirty.
I can do something similar as above, and use getValues(), as well as the metadata and save that, and on tab change rebuild the state manually as well, but that just seems round about for whatever reason, I figure there maybe another way to accomplish this single form nature, or like a background save on change to the page state.
https://codesandbox.io/s/tabs-760h9?file=/src/TabGroup.tsx:845-892
Pretty much using this as a template, only difference is I am using tailwind ui, and searchparams to store which tab is open.
Maybe skipping app level state, and just autosaving to server state similar to the solution here:
https://stackoverflow.com/questions/73614962/how-to-make-a-react-query-with-react-hook-form-autosave
What are your opinions in the matter?
CodeSandboxbluebill1049
Tabs by bluebill1049 using @material-ui/core, react, react-dom, react-hook-form, react-scripts
Stack Overflow
I am trying to make a form with React-Hook-Form and React-Query that autosaves whenever the user changes any of the fields (debounced). I am getting close, but it creates an infinite loop when I mu...
Was this page helpful?
