[core] The hidden prop does not always visually hide elements

Im using the hidden prop of Container to show only the current Tab and to hide the rest (copied from the Tabs example) was working fine until i upgraded to version 4.9.9 from version 4.9.1 (could be higher version but i think 4.9.1)

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

<Container hidden={tabIndex != 1}> </Container>

The Container is not hidden even though tabIndex = 1

Expected Behavior 🤔

Container should not be visible

Steps to Reproduce 🕹

<Container hidden={tabIndex != 1}>sdfsdfsdfds</Container>

https://codesandbox.io/s/empty-browser-n8fwh?fontsize=14&hidenavigation=1&theme=dark

• Works on 4.9.1 *

Steps:

1. upgrade to version 4.9.9
2. use a Container with hidden prop as True

Tech	Version
Material-UI	v4.9.9
React	v16.12.0
Chrome

[oliviertassinari]

so to use style instead of hidden?

@shtengel I recommend you to use <Container style={{ display: A ? 'none' : undefined }} /> or {A ? <Container /> : null} unless you have a good reason to use hidden instead.

[oliviertassinari]

In https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden, we have:

Appropriate use cases for hidden include:

1. Content that isn’t yet relevant but may be needed later
2. Content that was previously needed but is not any longer
3. Content that is reused by other parts of the page in a template-like fashion
4. Creating an offscreen canvas as a drawing buffer

Inappropriate use cases include:

1. Hiding panels in a tabbed dialog box
2. Hiding content in one presentation while intending it to be visible in others

I think that we should ignore 2. 3. and 4. I think that we should also ignore the use case to only set a node invisible (encourage inline style or CSS instead).

I have a concern with 1. and especially with React suspense: https://github.com/oliviertassinari/react-swipeable-views/issues/453#issuecomment-417939459, it might be important.

On the other hand, a. I haven’t seen any progress of the hidden prop in React, b. developers could always add an extra DOM node, c. what’s the overhead of supporting hidden (we have 30+ components to update)?

Out of this tradeoff equation, I’m leading toward recognizing the problem (it exists) but ignoring it (we have more to lose) => won't fix.

@eps1lon What do you think?