Materialize: cannot read property 'badInput' of undefined

Question

I'm using Behat with Zombie.js for end to end tests, using materializecss framework. I'm testing a case where a create action fails and the controller redirects back to the form page.

I get the following exception:

And I press "Crear"      # WebContext::pressButton()
  Error while processing event 'click': "TypeError: Cannot read property 'badInput' of undefined
    at .<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:22076)
    at Function.each (https://code.jquery.com/jquery-2.1.1.min.js:2:2880)
    at n.each (https://code.jquery.com/jquery-2.1.1.min.js:2:847)
    at Object.Materialize.updateTextFields (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:21969)
    at HTMLDocument.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:22558)
    at j (https://code.jquery.com/jquery-2.1.1.min.js:2:26860)
    at Object.fireWith [as resolveWith] (https://code.jquery.com/jquery-2.1.1.min.js:2:27673)
    at Function.ready (https://code.jquery.com/jquery-2.1.1.min.js:2:29467)
    at HTMLDocument.I (https://code.jquery.com/jquery-2.1.1.min.js:2:29658)
    at callListeners (/usr/lib/node_modules/zombie/node_modules/jsdom/lib/jsdom/events/EventTarget.js:170:34)
        in http://localhost/myresource/create" (Behat\Mink\Exception\DriverException)

The worst part is that this doesn't happen on the actual browser (maybe it's cause of a redirection?) so I have no idea how to reproduce it.

Any ideas?

Victor Baranov Victor Baranov · Accepted Answer · 2016-11-24T13:08:08

I am facing with the same issue with Zombie.js testing

describe('User visits test page', function() {
  const browser = new Browser();
  it('should open page ', function(done) {
    browser.visit('/test', function() {
     done();
    });
  })
});

of simple html page with one input:

<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="/vendor/materialize/css/materialize.min.css" />
    <script type="text/javascript" src="/vendor/jquery.min.js"></script>
    <script type="text/javascript" src="/vendor/materialize/js/materialize.js"></script>
  </head>
  <body>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" />
  </body>
</html>

input.validity is undefined in this case. The root cause is not clear for me. But it can be avoided with materialize.js changing

    $(input_selector).each(function(index, element) {
    if ($(element).val().length > 0 
    || element.autofocus 
    ||$(this).attr('placeholder') !== undefined 
    || $(element)[0].validity.badInput === true) {
      $(this).siblings('label').addClass('active');
    }
    else {
      $(this).siblings('label').removeClass('active');
    }
  });

to

    if ($(element).val().length > 0 
    || element.autofocus 
    || $(this).attr('placeholder') !== undefined) {
      $(this).siblings('label').addClass('active');
    } else if ($(element)[0].validity) {
      if ($(element)[0].validity.badInput === true) {
        $(this).siblings('label').addClass('active');
      }
      else {
        $(this).siblings('label').removeClass('active');
      }
    }
    else {
      $(this).siblings('label').removeClass('active');
    }

I've created pull request to materialize. Here's a link to it.

Materialize: cannot read property 'badInput' of undefined

1 Answers