[TextField][ variant=filled|outlined] can not click label to get input field focus (v3.1.1)

[TheRealArlie]

• 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

Clicking the label should give the input focus to the underlying input field.

Current Behavior

Clicking the label only marks the label text.

Steps to Reproduce

Link: https://codesandbox.io/s/o5qyjywl35

1. click on label

Context

I tried to use the new outlined variant of the TextField component.

Your Environment

Tech	Version
Material-UI	v3.1.1
React	16.5.2
Browser	Chromium 69 / Firefox 62

[eps1lon]

https://github.com/mui-org/material-ui/blob/7d2fadfc7b90c958d10ef89a0a3ce58cc7ff939e/packages/material-ui/src/InputLabel/InputLabel.js#L41-L46
is causing the issue. I don't know why the yellow background is only an issue for filled or outlined though.

zIndex was added because of #12890 in #12926.

[oliviertassinari]

@TheRealArlie You can workaround the problem by providing an id (it will link the input with the label). I'm also worried about the hover state to being applied.

[oliviertassinari]

Ok, I had a look at the MCW and vuetify implementations. They are both solving the problem with pointer-events: none;. The downside is that it's preventing users from selecting the label text. On the other hand, the implementation overhead is very small. I think that it's a nice tradeoff. I'm happy to apply it here too. We can add this style in:
https://github.com/mui-org/material-ui/blob/51bb15c6a909d8bbd6e09bc424b9dbb246228620/packages/material-ui/src/InputLabel/InputLabel.js#L41
and
https://github.com/mui-org/material-ui/blob/51bb15c6a909d8bbd6e09bc424b9dbb246228620/packages/material-ui/src/InputLabel/InputLabel.js#L59

@TheRealArlie Do you want to work on this? :)

[eps1lon]

@oliviertassinari That is very often an immediate turn of for me if I can't select text on a website. Can't we revisit the original fix for firefox autofill and make it right?

[oliviertassinari]

I don't know why the yellow background is only an issue for filled or outlined though.

@eps1lon It's because the input doesn't overlap the label in the "standard" variant.

Can't we revisit the original fix for firefox autofill and make it right?

I'm out of options here. If you see a better way I would love to learn it.

[byronluk]

Hey @oliviertassinari is it cool if I work on this? I'll try looking to see if there's a better solution.

[byronluk]

So it seems like your right, the default behavior on the original TextField wouldn't allow users from selecting the label text anyways. But either way the label text can be selected by dragging the cursor from outside the element over into the input.

[I-O-O-I]

+1

Maybe try "pointer-events: none;" on label in PR?
(not me)

[oliviertassinari]

@byronluk Yes, please go ahead :)