[Bug] label overlaying text on reload

Version

3.0.6

Reproduction link

https://demos.creative-tim.com/material-dashboard-pro/pages/authentication/signup/basic.html

Operating System

Ubuntu 22.04

Device

laptop

Browser & Version

Firefox (last version)

Steps to reproduce

1 - fill in the form with some information 2 - reload the page

What is expected?

I expect that when loading the page, if there is any information inside the field, it has the 'is-filled' class so that the text of the label is not over the value filled in by the user

What is actually happening?

When the field is filled in and, for some reason, the page reloads, the field comes back with the text previously filled in but without the 'is-filled' class, so the label stays over the text filled in the field.

Solution

Assuming the field is properly declared within a div.input-group along with its label:

// adding or removing the class 'is-filled' on inputs depending of the case
if (document.querySelectorAll('.input-group').length != 0) {
  var allInputs = document.querySelectorAll('input.form-control');
  allInputs.forEach(function(el) {
    if (el.value.trim() !== '') {
      // If the field is not empty, add the class
      el.parentNode.classList.add('is-filled')
    } else {
      // Otherwise, removes the class
      el.parentNode.classList.remove('is-filled')
    }
  })
}

Additional comments

This solution also suits the "material kit 2 pro" theme which has the same problem.

creativetimofficial / ct-material-dashboard-pro