Material-ui: [TextField] Chromes auto-fill covers label for outlined TextField

[PutziSan]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The yellow background inserted by chromes auto-fill should not cover the label.

Current Behavior

Chromes auto-fill covers the label

Steps to Reproduce

Link: https://material-ui.com/demos/text-fields/#outlined

1. use chromes auto-fill

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.1.0 |
| React | (your react-version from documenation-code ;) ) |
| Browser | Google Chrome 69.0.3497.92 |

possible solution

If I add z-index: 1 to the label, the problem is solved. Another option is to use the CSS-webkit-autofill-selector, but I am not sure which properties you have to change to make it fit

[PutziSan]

It also happens with filled TextField:

[oliviertassinari]

If I add z-index: 1 to the label, the problem is solved.

@PutziSan Thanks for raising! My bad, I have removed this logic. I think that it's generic enough to add it in the InputBase.
https://github.com/mui-org/material-ui/pull/12076/commits/abc8be8c7f46b957a97932cd91063bd6720c6853#diff-347c7dd040c46d0783e8c172e42e3dc1L47

[oliviertassinari]

@PutziSan Adding the style here should do it. Do you want to give it a try?
https://github.com/mui-org/material-ui/blob/a59903abde3925dd239a89a4d02a6c7020236302/packages/material-ui/src/InputLabel/InputLabel.js#L15-L22

[PutziSan]

Okay, cool, I'll send a PR.

If there appears further problems in another browser or if the z-index in the label breaks the layout of some users, there are 2 alternatives (I just thought of it and write it down for documentation):

We could swap the order of the input and label components. Since the label is then drawn after the input element, it appears above the yellow background. => changing this lines to:

// ...
select ? (
  <Select value={value} input={InputElement} {...SelectProps}>
    {children}
  </Select>
) : (
  InputElement
)}
{label && (
  <InputLabel htmlFor={id} ref={this.labelRef} {...InputLabelProps}>
    {label}
  </InputLabel>
)}

We could also leave the input field only as big as it really is and give the container the height/padding. This would look like this (quick&dirty adapted in the browser, doesn't look perfect as it should):

[oliviertassinari]

If there appears further problems in another browser or if the z-index in the label breaks the layout of some users

Do you have an example?

[PutziSan]

Custom PopOver-implementations with zIndex: 1. Of course this is more of a theoretical case, but possible ;)

https://codesandbox.io/s/xo6jqkr5op (the zIndex: 1-fix for labels is applied via the textField-class in this example)

[PutziSan]

material-components-web has also placed the label under the input field, whether it is exactly for this reason or for another, is of course hard to say ;)

I think, however, that the zIndex: 1-fix will not bother virtually anyone. I just thought about other possible consequences. If you don't say anything else I would adjust and push it with zIndex: 1 now.

[oliviertassinari]

@PutziSan I'm fine with the z-index, thanks for raising the issues. With that in mind, better put the style in the filled and outlined rules of the InputLabel than in the formControl.