textarea label unaffected by class='active'

Author: SulphurDioxideCreated Jan 19, 2017Updated Oct 18, 2024
Labelsbug

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.