Issue with forms

[hhertogh]

Hello,

I have an issue with the interface of some forms when using MDL in VueJS:

I don't know why this is like that. It's like this in Chrome.

Anyone already had such issue?

Thanks.

[DrNiels]

I have that issue as well. In my case, it triggers on a regular HTML page if login information is automatically filled in. It recovers if I click anywhere, but is initially shown as displayed above.

[aburai]

@DrNiels the browser triggers no change event on autofill, but you can check, if the input has a value and set the class "is-dirty" to the material textfield element

[DrNiels]

Thanks for the idea. Unfortunately, it's not working. Checking the value of the input before the click just returns an empty string. After the click, the change event is fired and everything works as intended. But it doesn't look like something you can fix...

[aburai]

@DrNiels here is the code i use in my login dialog and as you see, it is a little more than checking the value if this doesn't help at all, you need to set a timeout before you check

let me know if it helps

      // try to find out, if the input has a value
      // cause jQuery fires an error when use unknown pseudo selectors,
      // we catch all tries silently
      function hasValue(inp) {
        var
          $inp = $(inp),
          hasVal = $inp.val().length > 0; 

        try { hasVal = hasVal || $inp.is(':autofill'); } catch(e) {}
        try { hasVal = hasVal || $inp.is(':-webkit-autofill'); } catch(e) {}
        try { hasVal = hasVal || $inp.is(':-moz-autofill'); } catch(e) {}

        return hasVal;
      }