[Bug] Text inputs with the value attribute set break the label attached

[BaeFell]

Version

3.0.1

Reproduction link

https://jsfiddle.net/oxj5wtnc/

Operating System

Windows 11

Device

PC

Browser & Version

Chrome 96.0.4664.45

Steps to reproduce

1. Create a form group
2. Set the value attribute of a text input
3. The label will not be above the input, instead, it will be on the input

   What is expected?

   The label to be above the input box https://i.imgur.com/SN8aRvR.png

   What is actually happening?

   The label is on the input box https://i.imgur.com/RFx0o6u.png

---

Solution

Additional comments

[rarestoma]

Hi @nfell2009,

Thank you for working with our products.

To fix this issue, go to material-dashboard.js file and on // Material Design Input function section, inside the for loop, add the following:

if(inputs[i].hasAttribute('value')){
    inputs[i].parentElement.classList.add('is-filled');
  }

Please let me know if it works.

Best regards, Rares

[BaeFell]

Woo, that worked. Thanks!