title: Materialize css select not working with jquery steps
body: <p>I'm having trouble getting a Materialize css select element to work within a jQuery Steps wizard. And I found that this guy Jon Vadillo are having the same issue with his example on CodePen (<a href="https://codepen.io/jonvadillo/pen/xObWmw" rel="nofollow noreferrer">https://codepen.io/jonvadillo/pen/xObWmw</a>).</p>
  
  <p>When clicking the select element, it never activates. I have tried moving the select element outside of the jQuery Steps wizard and everything works as intended. (<a href="https://codepen.io/allanlange/pen/EWQzBb" rel="nofollow noreferrer">https://codepen.io/allanlange/pen/EWQzBb</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.datepicker').pickadate({
    min: new Date(),
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year
    firstDay: 1
  });
  
  var picker = $('#beginDate').pickadate('picker');
  picker.set('select', new Date());
  var picker = $('#endDate').pickadate('picker');
  picker.set('select', new Date());
  
  
  $('select').material_select();
  
  
  var form = $("#example-form");
  form.children("div").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
  
    /* Labels */
    labels: {
      cancel: "Cancel?",
      current: "current step:",
      pagination: "Pagination",
      finish: "Finish!!",
      next: "Next &gt;",
      previous: "&lt; Previous",
      loading: "Loading ..."
    },
  
  
    onStepChanging: function(event, currentIndex, newIndex) {
  
      return true;
    },
    onFinishing: function(event, currentIndex) {
  
      return true;
    },
    onFinished: function(event, currentIndex) {
      alert("Submitted!");
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*
      Common 
  */
  
  .wizard,
  .tabcontrol {
    display: block;
    width: 100%;
    overflow: hidden;
  }
  
  .wizard a,
  .tabcontrol a {
    outline: 0;
  }
  
  .wizard ul,
  .tabcontrol ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
  }
  
  .wizard ul&gt;li,
  .tabcontrol ul&gt;li {
    display: block;
    padding: 0;
  }
  
  
  /* Accessibility */
  
  .wizard&gt;.steps .current-info,
  .tabcontrol&gt;.steps .current-info {
    position: absolute;
    left: -999em;
  }
  
  .wizard&gt;.content&gt;.title,
  .tabcontrol&gt;.content&gt;.title {
    position: absolute;
    left: -999em;
  }
  
  
  /*
      Wizard
  */
  
  .wizard&gt;.steps {
    position: relative;
    display: block;
    width: 100%;
  }
  
  .wizard.vertical&gt;.steps {
    display: inline;
    float: left;
    width: 30%;
  }
  
  .wizard&gt;.steps .number {
    font-size: 1.429em;
  }
  
  .wizard&gt;.steps&gt;ul&gt;li {
    width: 25%;
  }
  
  .wizard&gt;.steps&gt;ul&gt;li,
  .wizard&gt;.actions&gt;ul&gt;li {
    float: left;
  }
  
  .wizard.vertical&gt;.steps&gt;ul&gt;li {
    float: none;
    width: 100%;
  }
  
  .wizard&gt;.steps a,
  .wizard&gt;.steps a:hover,
  .wizard&gt;.steps a:active {
    display: block;
    width: auto;
    margin: 0 0.5em 0.5em;
    padding: 1em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  
  .wizard&gt;.steps .disabled a,
  .wizard&gt;.steps .disabled a:hover,
  .wizard&gt;.steps .disabled a:active {
    background: #eee;
    color: #aaa;
    cursor: default;
  }
  
  .wizard&gt;.steps .current a,
  .wizard&gt;.steps .current a:hover,
  .wizard&gt;.steps .current a:active {
    background: #2184be;
    color: #fff;
    cursor: default;
  }
  
  .wizard&gt;.steps .done a,
  .wizard&gt;.steps .done a:hover,
  .wizard&gt;.steps .done a:active {
    background: #9dc8e2;
    color: #fff;
  }
  
  .wizard&gt;.steps .error a,
  .wizard&gt;.steps .error a:hover,
  .wizard&gt;.steps .error a:active {
    background: #ff3111;
    color: #fff;
  }
  
  .wizard&gt;.actions {
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
  }
  
  .wizard.vertical&gt;.actions {
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%;
  }
  
  .wizard&gt;.actions&gt;ul {
    display: inline-block;
    text-align: right;
  }
  
  .wizard&gt;.actions&gt;ul&gt;li {
    margin: 0 0.5em;
  }
  
  .wizard.vertical&gt;.actions&gt;ul&gt;li {
    margin: 0 0 0 1em;
  }
  
  .wizard&gt;.actions a,
  .wizard&gt;.actions a:hover,
  .wizard&gt;.actions a:active {
    background: #2184be;
    color: #fff;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  
  .wizard&gt;.actions .disabled a,
  .wizard&gt;.actions .disabled a:hover,
  .wizard&gt;.actions .disabled a:active {
    background: #eee;
    color: #aaa;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/rstaib/jquery-steps/master/build/jquery.steps.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
    &lt;div class="input-field col s6"&gt;
      &lt;select&gt;
            &lt;option value="" disabled selected&gt;Choose event type&lt;/option&gt;
            &lt;option value="1"&gt;Option 1&lt;/option&gt;
            &lt;option value="2"&gt;Option 2&lt;/option&gt;
            &lt;option value="3"&gt;Option 3&lt;/option&gt;
          &lt;/select&gt;
      &lt;label&gt;Event type&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="col s12"&gt;
      &lt;form id="example-form"&gt;
        &lt;div&gt;
          &lt;h3&gt;Account&lt;/h3&gt;
          &lt;section&gt;
            &lt;div class="row"&gt;
              &lt;div class="input-field col s12"&gt;
                &lt;input placeholder="Event title" id="title" type="text" class="validate"&gt;
                &lt;label for="title"&gt;Title&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
  
              &lt;div class="input-field col s6"&gt;
                &lt;select multiple&gt;
            &lt;option value="" disabled selected&gt;Choose style(s)&lt;/option&gt;
            &lt;option value="1"&gt;Option 1&lt;/option&gt;
            &lt;option value="2"&gt;Option 2&lt;/option&gt;
            &lt;option value="3"&gt;Option 3&lt;/option&gt;
          &lt;/select&gt;
                &lt;label&gt;Styles&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
          &lt;h3&gt;Profile&lt;/h3&gt;
          &lt;section&gt;
            &lt;div class="row"&gt;
              &lt;div class="input-field col s6"&gt;
                &lt;label&gt;Begin date&lt;/label&gt;
                &lt;input id="beginDate" type="date" class="datepicker"&gt;
  
              &lt;/div&gt;
              &lt;div class="input-field col s6"&gt;
                &lt;label&gt;End date&lt;/label&gt;
                &lt;input id="endDate" type="date" class="datepicker"&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="input-field col s12"&gt;
                &lt;input placeholder="Who is organizing the event?" id="organizer" type="text" class="validate"&gt;
                &lt;label for="organizer"&gt;Organizer&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="input-field col s6"&gt;
                &lt;input placeholder="http://www.mywebsite.com" id="website" type="text" class="validate"&gt;
                &lt;label for="website"&gt;Website&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="input-field col s6"&gt;
                &lt;input placeholder="contact@myweb.com" id="email" type="text" class="validate"&gt;
                &lt;label for="email"&gt;Contact email&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="input-field col s12"&gt;
                &lt;textarea id="description" class="materialize-textarea" length="140"&gt;&lt;/textarea&gt;
                &lt;label for="description"&gt;Describe the event in a tweet!&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>