TextField label not shown when has onChange, defalut value, is outlined and textField "appears"

[vsaona]

Okay, this is a super specific bug, but it is definitely a bug:

In code

.invisible { display: none; }

<script>
  function foo () {
    document.getElementById("1").classList.remove("invisible");
  }
</script>
<div class = "invisible" id="1">
  <mwc-textfield
    outlined
    label="something"
    value = "0"
    onchange = "doSomething(this)">
  </mwc-textfield>
</div>
<button onClick = "foo()">
    Make it appear
</button>

In words

You have a mwc-textField wich is Material outlined style, has a default value, and has a function as onChange property (it doesn't matter if the function actually exists, but the onChange property must be setted) The mwc-textFieldis inside something with display: none, and you can programatically make it appear.

Problem

When it appears, the label just doesn't appear. It doesn't appear even if you change the value of the text field, unless you erase all of its content. When empty and unfocused, the label appears (it takes the main place of the mwc-textField).

Further information

I tested this on Windows 10, using Node.js v14.16.1 as server, and using both Firefox and Edge as browsers.

[e111077]

Hello, this is a known issue with textfield. Upstream MDC library refactor in the works right now should fix this. In the meantime you'll have to call textfield.layout().

[exhuma]

Hello, this is a known issue with textfield. Upstream MDC library refactor in the works right now should fix this. In the meantime you'll have to call textfield.layout().

I'm not sure the link is correct. The linked file does not contain a function named layout().

I'm pretty new to lit and I don't know where I would need to call this method.

I am running into the same issue, and can confirm that the minimal reproducible example is:

<mwc-textfield
  label="Hello World"
  value="foobar"
  outlined
  ></mwc-textfield>

When using outlined, the label Hello World is not displayed and will be shown as in the screenshot of the original post.

[asyncLiz]

Fixed in M3

[lasamarndi1994]

I am facing the same issue. a label is not showing while changing the dynamic value.

[asyncLiz]

I am facing the same issue. a label is not showing while changing the dynamic value.

The old beta <mwc-textfield> won't receive this fix. I'd recommend trying to update to 1.0 and use <md-filled-text-field> or <md-outlined-text-field>, which doesn't have this problem.