Material-components-web: Floating label and placeholder overlap each other

[habelMarottipuzha]

If we add form-field of type date, we will get the floating label overlapped with placeholder.
code like

Full fiddle http://jsfiddle.net/jyc5jgg2/

[williamernest]

@habelMarottipuzha The jsfiddle you linked is using version 0.19.0 of the MDC library. Can you update the version and reproduce? We're currently on version v0.34.1, and I believe this issue has been resolved already.

[habelMarottipuzha]

@williamernest Sorry that I didn't check the version in jsfiddle. But Its still there with v0.34.1. I noted this in preact-material-components which uses v0.33.0. Then I add resolution for mdc with v0.34.1 and I got the same issue.
This is the code I tried in material-components-web demo.(Screen shot provided earlier)

   <div class="mdc-text-field">
      <input class="mdc-text-field__input" type="date" id="input">
      <label for="input" class="mdc-floating-label">Input Label</label>
      <div class="mdc-line-ripple"></div>
    </div>

Is there something I miss?

[williamernest]

@habelMarottipuzha Thanks for the additional information The MDCTextField currently only handles using type="text" and type="password". We'll discuss this further to see if what other input types we should support.

[acdvorak]

Unfortunately we can only support type="text" and type="password" for now.

We'll consider adding more input types in the future.

Thanks!

[olfek]

Please re-open this, moving back to MDL for now then.

[kfranqueiro]

Have you tried this and found it to not work? I'm pretty sure it has since been improved to work with several other input types including number and date...

[olfek]

Yes I have tried it, at the time of writing my previous comment, using the latest version.

Visually, its fine, and is what I expect, but behaviourally, as pointed out in this issue, it is not. The entered input overlaps the label, and the label does not animate out of the way as it does for the password field for example.

[olfek]

The input type for which it did not behave correctly is email.

[abhiomkar]

I'm not able to reproduce this issue with email type on latest version (v1.0.0). Please see this updated example on jsfiddle.

[olfek]

See this jsfiddle

[abhiomkar]

@olfek You'll need to instantiate the component before using it.

for (const el of document.querySelectorAll('.mdc-text-field')) {
  new mdc.textField.MDCTextField.attachTo(el);
}

See updated jsfiddle.

[olfek]

@abhiomkar Ah okay, thanks, this was missing from the docs, it only mentions a similar thing for ripples.