Labels overlapping prefilled content in Materialize

Question

What I'm trying to do is fill out a form that uses Materialize but what it's happening is the written content just overlapping the input's placeholder and not being actually "received" from the page. The JS code I'm using is the following:

$("label[for='firstname']").addClass("active"); 
document.getElementById("firstname").value = "John";

Because on the web I've noticed that many users fixed this problem addind the class "active" to the input's label, but this is not working for me.

Also, when trying to use

  $(document).ready(function() {
Materialize.updateTextFields();
  });

I get an error on the webpage that says "Uncaught ReferenceError: Materialize is not defined".

Is there another way to fix this issue? I'm autofilling using a Chrome extension and I cannot modify the html page content by injecting scripts with document.write.

Edit:

I've also noticed that if write manually in the input field, the class of the input goes from

materialize-element-field ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength

to

materialize-element-field ng-valid-pattern ng-valid-minlength ng-valid-maxlength active ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required

The class label is not changing at all.

There's also the following div before the input field:

<div ng-class="['materialize-element',
                            {
                                'input-half left': true,                                
                                'materialize-textinput': true,
                                'materialize-password': false,
                                'materialize-textarea': false,
                                'materialize-select': false,
                                'materialize-number': false,
                                'materialize-checkbox': false,
                                'materialize-radio': false,
                                'materialize-block-radio': false,
                                'collapsed': !selectBoxExpanded['firstname'] &amp;&amp; false,
                                'expanded': selectBoxExpanded['first'] &amp;&amp; false,
                                'has-icon': false &amp;&amp; true,
                                'required': requiredField['ship.firstname'] || true,
                                'not-empty': !isModelEmpty(ship.firstname || form['ffirstname_46afgt3'].$$rawModelValue),
                                'valid': (isModelModified(form, 'firstname_46afgt3') &amp;&amp; form['firstname_46afgt3'].$valid) &amp;&amp; form['firstname_46afgt3'].$viewValue.length != 0,
                                'error': (isModelModified(form, 'firstname_46afgt3') &amp;&amp; form['firstname_46afgt3'].$invalid),
                                'disabled': false,
                                'has-counter': false
                            }]" ng-click="selectBoxExpanded['firstname']=!selectBoxExpanded['firstname']" ng-init="initField('ship', 'firstname', '', false)" class="materialize-element input-half left materialize-textinput required">

The class of the div above changes to the following after I manually add text in the input:

materialize-element input-half left materialize-textinput required not-empty valid

Edit 2:

The input field is the following before the text:

<input class="materialize-element-field ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength" type="text" id="firstname" name="firstname_46afgt3" value="" maxlength="33" ng-pattern="/^[\u00C0-\u1FFF\u2C00-\uD7FF\u2019a-zA-Z\.\'\-\s]{1,}$/" ng-required="requiredField['ship.firstname'] || true" ng-model="ship.firstname" ng-init="validateField('firstname_46afgt3', true, 'W3sidHlwZSI6InJlcXVpcmVkIiwibGFiZWwiOiJmb3Jtcy5jaGVja291dC5kZWxpdmVyeS5tZXRhcGFjay5hZGRyZXNzLmZpcnN0bmFtZS5taXNzaW5nIiwiZGlzcGxheUxhYmVsIjoiSW5zZXJpc2NpIGlsIG5vbWUuIn0seyJ0eXBlIjoicGF0dGVybiIsImxhYmVsIjoiZm9ybXMuY2hlY2tvdXQuZGVsaXZlcnkubWV0YXBhY2suYWRkcmVzcy5maXJzdG5hbWUuaW52YWxpZCIsImRpc3BsYXlMYWJlbCI6IkNvbnRyb2xsYSBpbCBub21lLiJ9XQ==')" ng-keydown="ngKeyHandler($event)" ng-change="ngChangeHandler('firstname', 'firstname_46afgt3', false)" ng-trim="true" required="required">

And then this is after I write text in it:

<input class="materialize-element-field ng-valid-pattern ng-valid-minlength ng-valid-maxlength active ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" type="text" id="firstname" name="firstname_46afgt3" value="" maxlength="33" ng-pattern="/^[\u00C0-\u1FFF\u2C00-\uD7FF\u2019a-zA-Z\.\'\-\s]{1,}$/" ng-required="requiredField['ship.firstname'] || true" ng-model="ship.firstname" ng-init="validateField('firstname_46afgt3', true, 'W3sidHlwZSI6InJlcXVpcmVkIiwibGFiZWwiOiJmb3Jtcy5jaGVja291dC5kZWxpdmVyeS5tZXRhcGFjay5hZGRyZXNzLmZpcnN0bmFtZS5taXNzaW5nIiwiZGlzcGxheUxhYmVsIjoiSW5zZXJpc2NpIGlsIG5vbWUuIn0seyJ0eXBlIjoicGF0dGVybiIsImxhYmVsIjoiZm9ybXMuY2hlY2tvdXQuZGVsaXZlcnkubWV0YXBhY2suYWRkcmVzcy5maXJzdG5hbWUuaW52YWxpZCIsImRpc3BsYXlMYWJlbCI6IkNvbnRyb2xsYSBpbCBub21lLiJ9XQ==')" ng-keydown="ngKeyHandler($event)" ng-change="ngChangeHandler('firstname', 'firstname_46afgt3', false)" ng-trim="true" required="required">

It seems that the "value" tag in the input field is not being touched at all and if I try to manually edit it from Chrome Dev console, the same thing as autofill happens.

Answer 1

Ah, if I use the last_name example, I can see how the input looks like its overwriting the placeholder. It isn't actually a placeholder though. Its the label being positioned within the input area. When the input receives focus, it moves the label above. Without receiving focus (or the active class manually) the label remains in the same space that the input fields value resides in.

For your JS error, that is saying that the Materialize script isn't loaded. If you open the console on the page you're at and type in Materialize, does it return undefined or an object? If undefined, Materialize's JS isn't being applied to that page.

If it returns an object, I'd check if its possible that your script is executing before the Materialize script is executed.

Edit:

I just noticed that Materialize applies the "active" class to the label via javascript instead of just css states. That would indicate that the Materialize script must be on the page. Can you provide a link of the page you're working on?