Prefilled outlined MDCTextField - float-above modifier is not working well for the label

The MDCTextField doco is saying:

When dealing with JS-driven text fields that already have values, you’ll want to ensure that you render mdc-floating-label with the mdc-floating-label–float-above modifier class. This will ensure that the label moves out of the way of the text field’s value and prevents a Flash Of Un-styled Content (FOUC).

However, it doesn’t work entirely well for the outlined fields. Before the JS arrives, the label is moved up indeed, however it’s striken through:

Here is a sample page. To simulate late arrival of bundle.js, it doesnew MDCTextField when a button is pressed: https://label--float-above.glitch.me/

Here is the source: https://glitch.com/edit/#!/label--float-above

The reason why it’s happening is that MDCTextField adds two more classes to the DIV with mdc-notched-outline class: mdc-notched-outline--upgraded and mdc-notched-outline--notched

Expected behaviour: I guess that just adding mdc-floating-label--float-above modifier class should be enough. OR at least the doco should be changed.

MDC version: 3.1.1 Relative new Chrome used (77.0.3865.90) OS: Windows

[new-mikha]

Also having the same problem here. Has there been a PR to fix this one?

@mrethical not from what I know. I tried to prepare such PR myself, the fix looks doable but not easy, so I gave up (at least for the moment)

[mrethical]

Also having the same problem here. Has there been a PR to fix this one?