Floating label state

[rsuk]

I'm really interested in leveraging your library to reduce the amount of markup I need to implement Material Components for Web. I use knockout for data binding the control values, so I am doing this:

<mdc-textfield params="value: name">
    Item Name
    <p>Descriptive name for the item</p>
</mdc-textfield>`

.. which is working great. I'm guessing I'm doing this the right way - including what would normally be in data-bind in the params attribute? The problem I'm seeing is that the floating label isn't floating when the page and value is first loaded through the binding. If I delete the text and type the label floats. I suspect this might not be an issue specific to your library, but wondered if you have found a way to get around this - so the label is floated if the control contains text set through a ko binding.

[anton-kachurin]

Thank you for filing!

https://codepen.io/anton-kachurin/pen/BdKJpe

Seems like you're describing this scenario (see the pen above). In the latest Firefox, Chrome, and Edge it's working fine, i.e. the floating label floats when necessary. Could you provide more specific conditions (OS, browser, etc.) under which this behavior fails? You can use this pen as a template.

Underlying MDC-Web library is responsible for handling this case. On this line, it adds a special class to the component if the input isn't empty. I can submit an issue (and probably a PR too) to MDC-Web as soon as I have this bug reproduced.

[rsuk]

Thanks for getting back to me. Here is a pen to illustrate the problem: https://codepen.io/rsuk/pen/NvRerO

It is something I had hit with mdl too. I'm guessing that MDC doesn't get the right notifications when the field is updated through a knockout binding after the initial configuration.

[anton-kachurin]

Thank you for the comprehensive illustration. You're correct, the core textfield component checks the state of the value parameter only once on initialization, and there is no way to notify it when the value property is being updated.

As a workaround, the --float-above modifier may be applied to the <label> manually. This pen will give an idea of how to create a custom binding which solves this issue.

That's just a throw together, though. Please let me know if you need any help with implementing a real binding.

[anton-kachurin]

I've submitted a PR solving this issues in the core component. Will rebuild this library after the changes get into a release.