[MdField] don't function correctly in IE11

[BigBadaboom]

Input fields in IE11 don't seem to get styled properly. If you click away from the field (blur) after typing a few characters, The label enlarges back again and the field value is hidden.

The cause seems to be that, unlike other browsers, the field doesn't get the md-has-value class when the field has a value. It is:

<div class="md-field md-theme-default md-focused">
  <label for="card-number">16 digit card number</label>
  <input class="md-input" id="card-number" type="text">
/div>

instead of

<div class="md-field md-theme-default md-focused md-has-value">
  <label for="card-number">16 digit card number</label>
  <input class="md-input" id="card-number" type="text">
/div>

When inspecting in IE11, I get an exception in the MdInput code, which I presume is the cause:

if (value.constructor.name.toLowerCase() !== 'inputevent') {
-> Unable to get property 'toLowerCase' of undefined or null reference

Using beta-7

[Samuell1]

And beta-8 ?

[BigBadaboom]

The issue is the use of the x.constructor.name property.

The following patch to MdFieldMixin seems to fix this problem in IE11:

    var supportsInputEvent = typeof InputEvent === "function";   // (IE11 doesn't)
    if (!supportsInputEvent || value.constructor.name.toLowerCase() !== 'inputevent') {

I see that constructor.name is also used in MdRipple and MdAutocomplete, so similar fixes will be needed there. Sorry I don't have time to do a proper fix and test for all these cases.

[BigBadaboom]

@Samuell1 I haven't tried beta-8. I was using the release at https://unpkg.com/vue-material@beta, and that is still pointing at beta-7.

I just tried beta-8. It still uses constructor.name, so it is also affected by this issue.

[Samuell1]

@BigBadaboom Thanks for testing!

Yes, versioning is broken with @beta use it without.

[Samuell1]

I found we once fixed this but maybe we missed this #1365

[VdustR]

@Samuell1 #1365 is only for element, not for events.
Is there good ways to determine events crossing browsers, like Event.type?