Synchronise and validate data across multiple tabs

[Wojciech-Szczepanski]

Hi everyone,
Is your feature request related to a problem? Please describe.
The problem I encounter is related to the validation of multi-tab forms. In my case, one form consists of several tabs within a single context. When navigating to the form, the user, while on the first tab, is unaware of the required fields on subsequent tabs. React-hook-form does not validate fields that are not mounted to the DOM tree, therefore even with required fields left unfilled, the user can submit such a form. Stackblitz - form with validation issue.

Describe the solution you'd like
I want to achieve an effect similar to the react-admin framework presented on the react - admin demo website (use creds: login - demo, password - demo). In this example, the required fields of the form are located on both the first and second tabs. When attempting to save the form while on the first tab (without navigating to the second one), the form won't save, because validation errors are triggered on the second tab and they become visible upon navigating to it. Additionally, the tab on which an error occurred is highlighted. The only issue with their approach is that upon manually entering a random tab URL, no tab content is displayed instead of throwing 404.

Describe alternatives you've considered
From our research, in react-admin it is achieved by rendering the content of all tabs and hiding inactive tabs using display: none, to work around input state behaviour in react-hook-form. So this is exactly a workaround that we applied: display: none workaround. The problem lies in extracting the logic of displaying the inactive tab into the Tabs component and managing it by using the workaround of display: none.

[bluebill1049]

thanks for the feature request, i think this should a state management library's responsibility instead a form library.

[bluebill1049]

Register function will need to be invoked in order to store input value, so if your tab is not rendered and it won't be registered, but you can store values into Default Values at useForm hook. I would recommend each tab has its own form tho.

[Moshyfawn]

I can see how the values synced to an external store, such as a parent state, could work.. 🤔

[jasikpark]

I would recommend each tab has its own form tho.

If I want to treat all of the tabs as one "submission group" like they were actually one form, could I nest the forms in a form wrapping the tabs? So each tab tracks its own form state, which is provided by the parent form state or something?

[bluebill1049]

@jasikpark i think you can, just going to be tricky to validate when your tab is not in the view. especially with schema validation.

[jasikpark]

hmm ok, i was using Zod before to keep all the validation logic in the useForm hook, though I work w/ @IanVS and it seems he's run into other issues

[dominikmlynarczyk]

Actually, we face the same problem in the project - multiple tabs that contain fields with validation rules (e.g. required fields) and no clear user path (it's just not a multi-step form, user can initiate form from any tab via URL navigation).

React-admin mentioned in the thread uses react-hook-form internally to handle forms, but for this particular multi-tab form problem, they create their own wrappers and contexts that handle this.

Is the only one of the solutions you see a global state / little-state-machine? What do you think about the display: none; workaround mentioned in question?

I would greatly appreciate example on codesandbox/stackblitz how you, @bluebill1049 would approach this problem.