{"action":"created","issue":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/12890","repository_url":"https://api.github.com/repos/mui-org/material-ui","labels_url":"https://api.github.com/repos/mui-org/material-ui/issues/12890/labels{/name}","comments_url":"https://api.github.com/repos/mui-org/material-ui/issues/12890/comments","events_url":"https://api.github.com/repos/mui-org/material-ui/issues/12890/events","html_url":"https://github.com/mui-org/material-ui/issues/12890","id":360756575,"node_id":"MDU6SXNzdWUzNjA3NTY1NzU=","number":12890,"title":"[TextField] Chromes auto-fill covers label for outlined TextField","user":{"login":"PutziSan","id":13392042,"node_id":"MDQ6VXNlcjEzMzkyMDQy","avatar_url":"https://avatars1.githubusercontent.com/u/13392042?v=4","gravatar_id":"","url":"https://api.github.com/users/PutziSan","html_url":"https://github.com/PutziSan","followers_url":"https://api.github.com/users/PutziSan/followers","following_url":"https://api.github.com/users/PutziSan/following{/other_user}","gists_url":"https://api.github.com/users/PutziSan/gists{/gist_id}","starred_url":"https://api.github.com/users/PutziSan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PutziSan/subscriptions","organizations_url":"https://api.github.com/users/PutziSan/orgs","repos_url":"https://api.github.com/users/PutziSan/repos","events_url":"https://api.github.com/users/PutziSan/events{/privacy}","received_events_url":"https://api.github.com/users/PutziSan/received_events","type":"User","site_admin":false},"labels":[{"id":122764862,"node_id":"MDU6TGFiZWwxMjI3NjQ4NjI=","url":"https://api.github.com/repos/mui-org/material-ui/labels/bug","name":"bug","color":"e11d21","default":true},{"id":460201816,"node_id":"MDU6TGFiZWw0NjAyMDE4MTY=","url":"https://api.github.com/repos/mui-org/material-ui/labels/component:%20TextField","name":"component: TextField","color":"ffffff","default":false},{"id":444915427,"node_id":"MDU6TGFiZWw0NDQ5MTU0Mjc=","url":"https://api.github.com/repos/mui-org/material-ui/labels/good%20first%20issue","name":"good first issue","color":"0e8a16","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-09-17T07:52:41Z","updated_at":"2018-09-18T21:42:24Z","closed_at":null,"author_association":"NONE","body":"<!--- Provide a general summary of the issue in the Title above -->\r\n![image](https://user-images.githubusercontent.com/13392042/45610613-d9490900-ba5c-11e8-8fc8-28eb4915a713.png)\r\n\r\n<!--\r\n    Thank you very much for contributing to Material-UI by creating an issue! ❤️\r\n    To avoid duplicate issues we ask you to check off the following list.\r\n-->\r\n\r\n<!-- Checked checkbox should look like this: [x] -->\r\n- [x] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->\r\n- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.\r\n\r\n## Expected Behavior\r\n<!---\r\n    Describe what should happen.\r\n-->\r\nThe yellow background inserted by chromes auto-fill should not cover the label.\r\n## Current Behavior\r\n<!---\r\n    Describe what happens instead of the expected behavior.\r\n-->\r\nChromes auto-fill covers the label\r\n## Steps to Reproduce\r\n<!---\r\n    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.\r\n    Include code to reproduce, if relevant (which it most likely is).\r\n\r\n    This codesandbox.io template _may_ be a good starting point:\r\n    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app\r\n\r\n    If you're using typescript a better starting point would be\r\n    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript\r\n\r\n    If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?\r\n\r\n-->\r\nLink: https://material-ui.com/demos/text-fields/#outlined\r\n\r\n1. use [chromes auto-fill](https://support.google.com/chrome/answer/142893?co=GENIE.Platform%3DDesktop&hl=en)\r\n\r\n## Your Environment\r\n<!---\r\n    Include as many relevant details about the environment with which you experienced the bug.\r\n    If you encounter issues with typescript please include version and tsconfig.\r\n-->\r\n\r\n| Tech         | Version |\r\n|--------------|---------|\r\n| Material-UI  | v3.1.0  |\r\n| React        |     (your react-version from documenation-code ;) )    | \r\n| Browser      |     Google Chrome 69.0.3497.92    |\r\n\r\n## possible solution\r\nIf I add `z-index: 1` to the label, the problem is solved. Another option is to use the [CSS-webkit-autofill-selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill), but I am not sure which properties you have to change to make it fit\r\n"},"comment":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/comments/422566382","html_url":"https://github.com/mui-org/material-ui/issues/12890#issuecomment-422566382","issue_url":"https://api.github.com/repos/mui-org/material-ui/issues/12890","id":422566382,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMjU2NjM4Mg==","user":{"login":"PutziSan","id":13392042,"node_id":"MDQ6VXNlcjEzMzkyMDQy","avatar_url":"https://avatars1.githubusercontent.com/u/13392042?v=4","gravatar_id":"","url":"https://api.github.com/users/PutziSan","html_url":"https://github.com/PutziSan","followers_url":"https://api.github.com/users/PutziSan/followers","following_url":"https://api.github.com/users/PutziSan/following{/other_user}","gists_url":"https://api.github.com/users/PutziSan/gists{/gist_id}","starred_url":"https://api.github.com/users/PutziSan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PutziSan/subscriptions","organizations_url":"https://api.github.com/users/PutziSan/orgs","repos_url":"https://api.github.com/users/PutziSan/repos","events_url":"https://api.github.com/users/PutziSan/events{/privacy}","received_events_url":"https://api.github.com/users/PutziSan/received_events","type":"User","site_admin":false},"created_at":"2018-09-18T21:42:24Z","updated_at":"2018-09-18T21:42:24Z","author_association":"NONE","body":"[material-components-web](https://material-components.github.io/material-components-web-catalog/#/component/text-field) 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 ;)\r\n\r\nI 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."}}
{"actor":{"display_login":"PutziSan"}}