6

I have a component that renders Tabs component from Material UI 5.0.0-beta.5

There is a case when I set this components display to none.

But, then I get this error -

Material-UI: The value provided to the Tabs component is invalid. The Tab with this value (0) is not part of the document layout. Make sure the tab item is present in the document or that it's not display none.

I understand the error, and I am setting its display to none because but I wanna show and hide the component without re-rendering (because I want the user selections to persist).

Is there a way to fix this error or maybe a better way to do what I am trying to do?

Aniket Banyal
  • 322
  • 1
  • 5
  • 14

1 Answers1

6

You could try to use visibility: hidden instead

And if you want not to take up the space to the hidden component, set its width and height to 0 and then change them later to show the UI.

visibility: hidden;
width: 0;
height: 0;

And when you want to show it back:

visibility: visible;
width: 100%;
height: 100%;
Ryan Le
  • 7,708
  • 1
  • 13
  • 23