mdb-select

Expected behavior.mdb-select + initializer will reform my select element to an input + label field.When clicking on the input field the label moves upwards and I get a dropdown list.https://mdbootstrap.com/docs/jquery/forms/select/ --> Select with a label and search box Actual behavior .mdb-select + initializer reforms my select element to an input + label field.When clicking on the input field the label DOES NOT move upwards and I get a dropdown list. Upon selecting something I have both texts mixed through eachother.

Resources (screenshots, code snippets etc.)

<div class="select-wrapper mdb-select md-form"> <span class="caret">▼</span> <input type="text" class="select-dropdown"> <span class="search-wrap ml-2"> <div class="md-form mt-0"> <input type="text" class="search form-control w-100 d-block" placeholder="Search here.."></div> </span> <select searchable="Search here.." class="mdb-select md-form initialized" id="knp_Opties"></select>
</div> <label for="knp_Opties" class="mdb-main-label">Opties</label>

This is the code that is being renderd (I cut out the Options and Li items for readbility.When I manually swap the last Label inside the closing /div tag, like follows.

<div class="select-wrapper mdb-select md-form"> <span class="caret">▼</span> <input type="text" class="select-dropdown"> <span class="search-wrap ml-2"> <div class="md-form mt-0"> <input type="text" class="search form-control w-100 d-block" placeholder="Search here.."></div> </span> <select searchable="Search here.." class="mdb-select md-form initialized" id="knp_Opties"></select><label for="knp_Opties" class="mdb-main-label">Opties</label></div>

Everything works as it is intended. I can not figure out why the label gets locked outsidethe Div.. Thanks for the help