google / google/material-design-lite

Label overlaps with placeholder on focus out with empty value

Open
#5,238 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

> 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
screen shot 2018-09-19 at 8 52 07 am

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.