Dogfalo
textarea label unaffected by class='active'
Description
When taking the textarea example code straight from the docs with the latest version of Materialize, I cannot get the label to sit in the raised 'active' position. When the label has the following class class='active', unlike the other fields, it doesn't move to the expected position.
If we add the class to the label when $('document').ready(... with code like this $('.input-field label').addClass('active');, the label remains in the default position.
The strange part is that if you use this code instead it works:
setTimeout(function(){ $('.input-field label').addClass('active'); }, 1);
Why can I not force the label to be 'active' when the page has loaded or in the initial HTML markup? The documentation doesn't explicitly state that I can use this with textareas so maybe I've misunderstood but I would appreciate if this could be added.
Repro Steps
The codepen I have linked below consists of the example code pasted in and the two techniques in the JS pane. If you comment out the setTimeout() line then the label doesn't appear to be set to active.
I've tried it with the latest versions of the JS and CSS in the /bin too and several different browsers on Windows 10.
(My default browser is Google Chrome Version 55.0.2883.87 m on Windows 10).
Codepen
For ease, I've created a codepen to demonstrate the issue which can be found here.
in HTML code I add:
<div class="input-field col s12">
<textarea id="message" class="validate materialize-textarea" name="message" required></textarea>
<label for="message" class="active">Mensagem*</label>
</div>
after load materialize script, its remove the 'active' class in the label
I found a solution to the issue, if anyone still have it. It works for me by forcing the focus in the textarea or input.
Basically I added this jquery code:
$('textarea').first().focus();
<div class="input-field">
<textarea id="content" class="materialize-textarea validate " name="message" required></textarea>
<label for="content" class="active">Message</label>
</div>
P.S.: I was following the docs, but didn't work for me
https://materializecss.com/text-inputs.html
