[FormControl] The addition of z-index 0 breaks third party dropdowns

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

Current Behavior 😯

After upgrading material-ui my dropdown that uses react-select appears behind any checkboxes. See example:

After much investigation it was caused by the addition of z-index: 0 on .MuiFormControl-root. If I do z-index: unset !important globally it fixes my issue, but I see that this was added to fix a blurry text issue: https://github.com/mui-org/material-ui/pull/19547

Expected Behavior 🤔

Expect not to set the stacking context for all form controls: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/.

I’ll admit I’m not a genius at this stuff, but seems a bit harsh to force z-index 0 for all field components and then require them to override. More than happy to be proven wrong and have an explanation though.

Steps to Reproduce 🕹

I use https://github.com/iulian-radu-at/react-select-material-ui and have a couple of checkboxes below my select field.

This same error does not happen for standard material select field because it seems to be adding dom elements to another root rather than as children. So it seems this will break any other third-party tools that add elements as children.

Context 🔦

My case was a search form with filters and checkboxes.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.2
React	v16.12.0
react-select-material-ui	v6.3.0

[oliviertassinari]

I meant to leave the blur as is.

[oliviertassinari]

@chybisov I think that we should revert and ignore the blurry issue. As far as I understand it, there is no clear explanation of why a z-index fixed the problem in the first place, nor that it will keep working.

diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index 7419a431b..2aa6d4dc6 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -18,7 +18,6 @@ export const styles = {
     padding: 0,
     margin: 0,
     border: 0,
-    zIndex: 0, // Fix blur label text issue
     verticalAlign: 'top', // Fix alignment issue on Safari.
   },
   /* Styles applied to the root element if `margin="normal"`.