Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React material border still showing under label on focus for outlined variant

See original GitHub issue

Outlined textfield not focused

Outlined textfield focused

<TextField
    id="full_name"
    label="Full Name"
    margin="dense"
    autoComplete="new-password"
    value={leadPayload.full_name}
    onChange={this.handleChange}
 />

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

Expected Behavior

Current Behavior

Steps to Reproduce

Link:

Context

Your Environment

Tech	Version
Material-UI	“@material-ui/core”: “^3.2.2”
React	“react”: “^16.5.2”
Browser	Chrome
TypeScript
etc.

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:11 (5 by maintainers)

Top GitHub Comments

8reactions

dariusblajancommented, Oct 24, 2018

I had a similar issue with the border striking through the label for a select input. The solution I found in the demos uses ReactDOM.findDOMNode(labelRef).offsetWidth to set labelWidth as it is a required prop(it’s actually the width of the element that hides the outline under the label), but I couldn’t get it to work with refs. I ended up using <TextField select> {...mappedOptions} </TextField> as shown in the examples here and it works great.

2reactions

adimshevcommented, Jun 24, 2019

I have same problem on Safari (macbook, ipad). maps.mirlk.ru