When clicking on any other tabs, React tabs reset/clears all form input fields

Question

I wanted to add tab menu so I decided to go with React Tabs. The following is how code is structured. The problem is when I click on tab 2, tab 1 form input gets reset/cleared. The same happens if I click on tab 3 all other tabs will get reset/cleared. Is there a way I can prevent this from happening?

<Tabs>
    <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
    </TabList>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
</Tabs>

Re-check your component logic, this most likely happens when your component(s) is being mounted/unmounted in between tab switching. — Ryan Le, Mar 14 '22 at 03:20
Cuz the other tab is being unmounted. To keep your data, don't unmount them, hide them by css — vy.pham, Mar 14 '22 at 06:05

score 3 · Accepted Answer · answered Mar 31 '22 at 18:51

Change your code to

<Tabs forceRenderTabPanel={true}>
<TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
</TabList>
<TabPanel>
    <input type="text"/>
</TabPanel>
<TabPanel>
    <input type="text"/>
</TabPanel>
<TabPanel>
    <input type="text"/>
</TabPanel>
</Tabs>

For more information check https://github.com/reactjs/react-tabs#forcerendertabpanel-boolean

When clicking on any other tabs, React tabs reset/clears all form input fields

1 Answers1