MDCTextField: Add support for native placeholder text when element is focused

[rcabanero]

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

• v0.39.3

What browser(s) is this bug affecting (including version)?

• chrome 69.0.3497.81

What OS (and version) are you using?

• macOS High Sierra 10.13.6

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

• Navigate to the demo page of mdc-textfield (https://material-components.github.io/material-components-web-catalog/#/component/text-field)
• Inspect the element and add a placeholder attribute to the textfield on the demo with any value on it
• Select or try to focus on the demo and then focus out
• You'll see that the label overlaps with the placeholder

What is the expected behavior?

• I believe the label shouldn't animate when there's a placeholder just like when it has a value

What is the actual behavior?

• The label is overlapping the placeholder text

Any other information you believe would be useful? Here's a screenshot on how it looks on the Demo site

[williamernest]

@rcabanero Thanks for reporting this issue. We initially designed the text field to be used without a placeholder element, since the floating label is used to indicate the purpose of the field. The helper text can also be used to explain formatting or requirements of the input. I'll double check with design to see if we plan to implement this in the future.

[rcabanero]

@williamernest I'm just happy to let you know. You're right, both the floating label as well as the helper text are great areas to display help information. It might be helpful though if this is somewhere in the documentation so devs can avoid it as much as possible.

[williamernest]

@rcabanero Just confirmed with design that we'll be adding this as a feature in a future release.

[rcabanero]

@williamernest that's even better. I appreciate for the taking the time to let me and others know about this. Thanks.