Submit one button for all Forms in multiple tabs

Forge Forge Modules and Product Triggers
, , ,
1

Hi gens,

I’m trying to have a ModalDialog with several Tabs, and in each tab there are several Forms (from: DataPicker, TextField, UserPicker, Select, etc.). However I would like for the user when clicking on a Submit the Forms from all tabs and not just the current tab.
Here is an example of my current setup using the Forge UI:

<Fragment>
  <ModalDialog>
     <Form onSubmit={onSubmit}>
       <Tabs>
           <Tab label="Tab 1">             
              <DatePicker name="test 1" />
             <TextField label="test 2" name="test 2"/>
             <UserPicker label="user" name="user" />
          </Tab>
          <Tab>
            <Select label="Test 3" name="test 3" />
                 <Option value="test31" label="test31" />
                 <Option value="test32" label="test32" />
            </Select>
          </Tab>
       </Tabs>
    </Form>
 </ModalDialog>
</Fragment>

In the above example when ever I click after proving the input it sent input only of the last tab and not all form fields.
Is there any way that all the value after Submit click could be stored into the issue?
Or for each Tab I would need to have a Submit button and after clicking going to next Tab?

Thanks in advance and looking forward for suggestions.

:pray:

3 Likes
2

I’m not sure but it looks like changing tab cleans the state of each component. You could save the state of the form using useState and then submit the form state on submit.

3 Likes
3

Switching from one tab to another clears a UI component state in the first. The way to preserve the tab components state looks attractive. But how can I do this? There is no such event handler onTabChange…

1 Like
4

I managed to do a different approach as there is no workaround for this. Having a stages/pages of the ModalDialog. It is not nice but it is working with next and back button and in the end submit.
Looking forward from Atlassian to make this possible.