*Expected behavior*Label to be attached as in the code sample and wrapped in the select wrapper

Actual behavior

When $(".mdb-select").materialSelect() is called, the select and ul tags get wrapped in a div but the label is left out and so it doesn't get attached properly.

Resources (screenshots, code snippets etc.)

The code before calling materialSelect() :

<div class="form-group md-form select optional default_test">
  <select class="select optional md-form mdb-select" name="default[test]" id="default_test">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <label class="form-control-label mdb-main-label select optional" for="default_test">Test</label>
</div>

The code I have after calling materialSelect()

<div class="form-group md-form select optional default_test">
  <div class="select-wrapper select optional md-form mdb-select">
    <span class="caret">▼</span>
    <input type="text" class="select-dropdown form-control" readonly="true" required="false" data-activates="select-options-b800023a-dd99-4117-93e1-54acd72c59a7" value="">
    <ul id="select-options-b800023a-dd99-4117-93e1-54acd72c59a7" class="dropdown-content select-dropdown w-100" style="width: 938.328px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
      <li class=""><span class="filtrable">    </span></li>
      <li class="active selected"><span class="filtrable"> 1   </span></li>
      <li class=""><span class="filtrable"> 2   </span></li>
      <li class=""><span class="filtrable"> 3   </span></li>
    </ul>
    <select class="select optional md-form mdb-select initialized" name="default[test]" id="default_test">
      <option value=""></option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  <label class="form-control-label mdb-main-label select optional" for="default_test">Test</label>
</div>

The code I would be expecting for it to work:

<div class="form-group md-form select optional default_test">
  <div class="select-wrapper select optional md-form mdb-select">
    <span class="caret">▼</span>
    <input type="text" class="select-dropdown form-control" readonly="true" required="false" data-activates="select-options-b800023a-dd99-4117-93e1-54acd72c59a7" value="">
    <ul id="select-options-b800023a-dd99-4117-93e1-54acd72c59a7" class="dropdown-content select-dropdown w-100" style="width: 938.328px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
      <li class=""><span class="filtrable">    </span></li>
      <li class="active selected"><span class="filtrable"> 1   </span></li>
      <li class=""><span class="filtrable"> 2   </span></li>
      <li class=""><span class="filtrable"> 3   </span></li>
    </ul>
    <select class="select optional md-form mdb-select initialized" name="default[test]" id="default_test">
      <option value=""></option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <label class="form-control-label mdb-main-label select optional" for="default_test">Test</label>
  </div>
</div>

I've fixed it temporarly by modifying mdb.js and changing this line

this.mainLabel = this.$nativeSelect.next('.mdb-main-label');

for this

this.mainLabel = $("label[for='"+this.$nativeSelect.attr('id')+"']");

which in my opinion makes more sense