Label overlaps input when loading partial page

Unless I do a full page reload I get this on my input fields:

I'm using Turbolinks which swaps out parts of the page instead of doing a browser refresh. Because of this javascript that is triggered when the file is loaded (rather than binding to page events) does not get triggered. I would imagine the same bug will occur with $.load() but have not tested this.

Selecting the input field fixes this. It seems like this behavior is defined in "forms-free.js". The user-interaction events are triggered from "$(document).on()", which works fine even after swapping out part of the document body. However some code is triggered inline and will not be executed again.

Here is the html:

<form method="post" id="BriefingTaskForm" data-js-ajax-form="" action="/BriefingTask/Submit">
    <input data-val="true" data-val-required="The ProcessInstanceId field is required." id="ProcessInstanceId" name="ProcessInstanceId" type="hidden" value="acd75b47-880b-4378-8c36-0c971c0449d0">
    <input data-val="true" data-val-required="The TaskId field is required." id="TaskId" name="TaskId" type="hidden" value="2678a1be-290b-41ce-a58b-7dd1cb63c1bb">

        <div class="md-form">


<div class="select-wrapper"><span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-0a17124b-c506-4869-b9f3-8ee417bbf019" value=""><ul id="select-options-0a17124b-c506-4869-b9f3-8ee417bbf019" class="dropdown-content select-dropdown w-100"><li class="active"><span class="filtrable">Select..</span></li><li class=" "><span class="filtrable">Other</span></li><li class=" "><span class="filtrable">EAN</span></li><li class=" "><span class="filtrable">QRCode</span></li></ul><select data-js-mdb-select="" id="Metadata_0__Value" name="Metadata[0].Value" class="initialized"><option value="">Select..</option>
<option value="Other">Other</option>
<option value="EAN">EAN</option>
<option value="QRCode">QRCode</option>
</select></div>
            <label class="mdb-select-label" for="Metadata_0__Value">BarcodeType</label>
            <input id="Metadata_0__Code" name="Metadata[0].Code" type="hidden" value="BarcodeType">
            <input id="Metadata_0__ModelType" name="Metadata[0].ModelType" type="hidden" value="MasterdataMetadataViewModel">
        </div>
        <div class="md-form">

<input class="form-control mb-4 no-spin-buttons text-box single-line" data-val="true" data-val-required="The Value field is required." id="Metadata_1__Value" inputmode="numeric" min="0" name="Metadata[1].Value" pattern="[0-9]*" type="number" value="0">
            <label class="mdb-select-label active" for="Metadata_1__Value">MaterialNumber</label>
            <input id="Metadata_1__Code" name="Metadata[1].Code" type="hidden" value="MaterialNumber">
            <input id="Metadata_1__ModelType" name="Metadata[1].ModelType" type="hidden" value="IntMetadataViewModel">
        </div>
        <div class="md-form">

<input class="form-control mb-4 text-box single-line" id="Metadata_2__Value" name="Metadata[2].Value" type="text" value="">
            <label class="mdb-select-label" for="Metadata_2__Value">Barcode</label>
            <input id="Metadata_2__Code" name="Metadata[2].Code" type="hidden" value="Barcode">
            <input id="Metadata_2__ModelType" name="Metadata[2].ModelType" type="hidden" value="StringMetadataViewModel">
        </div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Ns9x5fLsTZNj0VF_aHR3W-pFwvlEcqZzwPRE7SA1JWDfbEdWdxwEUosbsutvqrvMWiewMk6nnf6TmiE69L3Y5_KgiJpdfAn-0Qk5Odu50sKO7u0a7UhZHkywsGnzQOi5vmjsSrbWlUYMvp4g5Wclj1KYgGfzU7M79S1OoOrSl3HI7hGe5FWgrZCV6LVV9jFTA"></form>