Persisting data in form wizard on tab change without submiting the form

[IvanBarbaric992]

Hello there

I have a full-screen form component(parent) which renders wizard(tabs) and each tab contains a component which can be either grid, od form component with inputs of course. I have called useForm hook inside each tab(child) component. I want to persist data of changed inputs when a tab is changed but not submitted. I want to track those changes and save them to redux store, so when I switch back to the first tab I have updated(but not saved) I want my updated changes to stay there(fill it from redux store).

Should parent(which renders tabs) dispatch an action with getValues of each child, or each child should dispatch actions(because getValues is available inside each child)? If it is a parent job, what would you suggest the best and less painful way to send getValues from child to parent? Also, when should it happen? on outside div(where form inputs are nested) click or on every input change(which seems not good at all because of dispatching action with data on every change should influence on performance, thank you in advance.

[bluebill1049]

take a look at the example folder there is example folder.

Tabs Form (MUI) | https://codesandbox.io/s/tabs-760h9

[IvanBarbaric992]

Thank you Bill, but unfortunately, you have to click on a submit button of each tab so the data can be stored, what I need is to store(persist) data WITHOUT submit click. So when I enter or modify some inputs on the first tab, and then switch to the second tab (Tab2 by clicking on it), I want my data to get stored in the state(let's say redux) and when I go back to Tab 1 redux state should fill my inputs with modified data(no submitting any tab whole time). In your example how would you dispatch an action to store data to redux from getValues() without submit handler, how should child send that getValues to the parent so parent can dispatch an action for his child to save his data?. Or should each child(component inside each tab) dispatch action to save getValues data by itself? I came up with saving getValues to store by on outside click event for div which contains all inputs, or with dispatching data to store every time when onChange of inputs is triggered(that seems bad). Do you have any better solutions? Thank you in advance and sorry for long and maybe bad explanation.

[phyolim]

You have the form values from control.getValues(). So, you can use a click handler on the next/previous buttons to save that to Redux. Then, use reset(default values + redux values) inside of a useLayoutEffect to set initial values of form. I used lodash to merge the redux state and default values. _.merge and _.unionBy were very helpful.

[bluebill1049]

good suggetion.

[orszaczky]

this should be in the docs, persisting form state (without submit) is a common thing to do when working with forms

[IvanBarbaric992]

Thank you @phyolim for your suggestion. I have implemented it in a similar way. One thing I just want to ask seeking for let's call it "best practice", is it in a case like this better to have one "big" useForm hook inside parent(who renders multi-tab component and children(tabs) and send all form methods from that hook to each child(tab) or define in every single child(tab) useForm and send with callback function data to parent when needed. I am asking that, and I think many people are dealing with similar problems and questions, because handling tab change is a function defined in the parent(parent is in charge of changing tabs), and when that function is called I have to store modified form data in the redux state.

Imagine this example of @bluebill1049 https://codesandbox.io/s/tabs-760h9 and instead of saving data to store when submit is clicked or any other event handler defined inside the child(tab), to save data to store when handleChange(function inside parent called Simple Tabs functional component) is called. How would you do that(knowing that getValues are only accessible inside Form1, Form2, etc.). All in all cases like Bills example but storing data with parents tab change click(handleChange function) not submit or any other function defined inside the child. Thank you guys, in advance.

[Flubber129]

@IvanBarbaric992 Did you manage to figure this out?

[Teut2711]

I have a similar issue but instead of multiple forms, I have a single big form with semantic-ui-react tabs component.

FIX:
defaultValue = getValues(name)||props.defaultValue as field's prop should help along with const methods = useForm({ shouldUnregister: false });

[Supcar27]

@IvanBarbaric992 @bluebill1049 im struggling with a very similar issue just one step deeper, i have a parent component that renders a stepper component and outlet, where each step is its own form. i need to save the data from each step when next step in the stepper component is clicked without submitting the form getValues() will give me the values in the child i can pass it to the parent component but i want the stepper component to trigger the method.

any suggestions? or maybe i need to restructure?

[ABoklogov]

I had a similar problem, I solved it this way: When unmounting the form component, I wrote the form data to the state:

useEffect(() => {
    return () => {
      const formData = getValues();
      dispatch(updateFormData(formData))
    }
  }, [dispatch]);

And when mounting the form, I took the form data from the state:

const Form = useAppSelector(state => state.SignUp.Form);
useForm({ defaultValues: Form })