Material UI Tabs: After switch between tabs, changes in tabs discarded

Question

I use material ui tab component. after switch between tabs, changes in tabs discarded.In fact, after switching between tabs, the tabs are rendered again. Suppose I have a textField in one of the tabs. I enter some inside this textField. After going to another tab and returning, the value inside the textField is cleared. How can I prevent this?

Answer 1

Basically, After switching tabs in Material UI, invisible tabs will be destroyed and removed from DOM. So, You have to write some logics by yourself(And maybe not using TabPanel component).

First -> You need to save the current tab's value in your state

Second -> Create a hidden class

 .hidden { display: none; }

Third -> You need to check if the active tab is the same as index of your tab, you need to assign hidden class to it.

PS: If you look carefully, the main idea of this method is preventing inactive tabs from displaying not rendering