mwc-textfield label rendering incorrectly when value is preset.

[aarondrabeck]

** PLEASE READ THIS BEFORE FILING AN ISSUE **

I'm submitting a:

• [ X] bug report
• feature request

What OS are you using?
Windows 10

What browser(s) is this bug affecting:
All (Chrome 76)

Current behavior:
Label doesn't render correctly when value is preset.

<mwc-textfield       
          label="Name"
          value="test"
          outlined
          required
          validationMessage="Name is required"
        >

Label also doesn't render correctly when present with binding.

value="${this.newSlideShowName || ''}"

[e111077]

Hello, I can't seem to reproduce the issue. Can you please make a live repro?

Here is what I've got so far:
https://glitch.com/~mwc-showcase
code: https://glitch.com/edit/#!/mwc-showcase
live app: https://mwc-showcase.glitch.me

[aarondrabeck]

Interesting! Well this took me a minute to figure out.

It turns out, I am hiding the container that the input is in until I get an API call back with some data I wish to edit. I then bind that data to input's value and un-hide the container with the input in it. This causes the drawing error. I was able to reproduce with a setTimeout here https://glitch.com/~solar-booth.

I imagine the input is doing some calculations when its hidden with 0 width.

Although this is slightly an edge case, I would think others will run into the same issue if they are dealing with loading data from a remote source and do not wish to show empty inputs as the load occurs.

[e111077]

Hmm this looks like it might also be an issue in @material/textfield. Shooting from the hip: I might have to end up providing a forceLayout function or upstream the issue.

I'll have to take a closer look after the holiday

[e111077]

Missed it this week, but it's still on my radar