Material-design-lite: Floating label does not activate if a value is inserted to textarea/textbox

[gustalima]

Hi,

I've been using MDL to develop a new version of my website (academic tool), and my javascript functions add values to textareas and textbox. When they add these values, there's a overlay between added text and the label (which is a floating label). The label does behave as it should if I click on the area.

The website is: http://www.ifsc.usp.br/htpoligo/new/index.html
Click in Load Example to see what I mean

Do you have any clues if this is a problem with my website or the way I implemented?

Thanks in advance.
Gustavo

[surma]

You need to call change() to make the MaterialTextfield aware that the value has changed (or use change() to change the value in the first place).

I made a little codepen. HTH

[mgiuca]

Thanks for the tip.

It would be helpful if this were documented on the website or the documentation.

[gustalima]

The solution proposed by surma works but not entirely in my case. It will not change all textfields (not even with querySelectorAll instead of querySelector), only the first one. This is the way querySelector works as far as I read about.

I got a solution using
$("#element").parent().addClass("is-dirty");

I think it is related to the class or the way I used it. I'm new to javascript and html, so I create variations of mdl-textfield, but probably in the wrong way.

[surma]

@gustalima It won’t work with querySelectorAll as that returns a node list. That is basic JS and not MDL specific. Just do something like

var nodeList = document.querySelectorAll('.selector');
Array.prototype.forEach.call(nodeList, function(elem) {
  elem.MaterialTextfield.change('...');
});

[moekno]

@surma I checked out your solution but it does not work for me.

var nodeList = document.querySelectorAll('.mdl-textfield__input');

Array.prototype.forEach.call(nodeList, function (elem) {
    elem.MaterialTextfield.change();
});

The debugger says that the MaterialTextfield is null or undefined.

[Garbee]

@rintindon You don't query the input itself, you query the element you define the JS class on.

Please use StackOverflow for support in the future.

[ailic]

I would recommend checkDirty() method instead of change(). It compares the states, and updates MDL state if necessary.

var nodeList = document.querySelectorAll('.mdl-textfield');

Array.prototype.forEach.call(nodeList, function (elem) {
    elem.MaterialTextfield.checkDirty();
});

[gperozzo]

I'm still having a problem with this in a login form. Already tried what @surma provided and got nothing. My problem is with browser auto-fill fields in the login. Any suggestions about this?

I tried @ailic solution as well and it only works when first entered the page. After I log in to home page and back to login page, the labels continue to display over input text.

[llamicron]

@gperozzo Did you try to set an interval to run that code every once in a while? It works for me.

window.setInterval(function() {
  var nodeList = document.querySelectorAll('.mdl-textfield');

  Array.prototype.forEach.call(nodeList, function (elem) {
    elem.MaterialTextfield.checkDirty();
  });
}, 500)

This will check for dirty textfields every half second and fix them only if necessary. Not a great solution, but it works. Credit to @ailic for the important part.

[amalskr]

finally i found a tricky solution, add temp value data to value attribute
like - value="Data"

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="isactive" name="isactive" value="Data">
                <label class="mdl-textfield__label" for="isactive">isactive...</label>
            </div>

[awesomedeba10]

Its provided in documentation here https://getmdl.io/started/index.html . Should add componentHandler.upgradeElement(element);