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?
bluebill1049
CodeSandbox
Tabs - CodeSandbox
Tabs by bluebill1049 using @material-ui/core, react, react-dom, react-hook-form, react-scripts
Stack Overflow
how to make a React-Query with React-Hook-Form Autosave
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...
2 Replies
I’m not quite sure, but could you make the clicking of the tab cause the form state to be written to some higher up state?
I did something similar, it was my newness to typescript that was the issue, and the way rhf handles types. Resolved now