The following is an example of a drop down menu implemented in Google MDL Javascript and HTML

   <div class="mdl-textfield mdl-js-textfield getmdl-select" id="extractModeReferral">
        <input type="text" value="" class="mdl-textfield__input" id="extractModetextReferral" readonly style="width:250px;">
        <input type="hidden" value="" name="extractModeReferralhidden">
        <label for="extractModeReferraldd" class="mdl-textfield__label">Extract Mode</label>
        <ul for="extractModeReferraldd" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" id="extractModeReferralUL">
            <li class="mdl-menu__item" data-val="PrintOnArrival" data-selector=true>Print On Arrival</li>
            <li class="mdl-menu__item" data-val="PrintOnAcceptance" data-selector=true>Print On Acceptance</li>
            <li class="mdl-menu__item" data-val="DoNotPrint">Do Not Print</li>
        </ul>
    </div>

And here is the javascript which populates that drop down

$('#extractModetextReferral').val(data.ReferralExtractMode).parent().addClass("is-dirty");              // referral
.
.
.
getmdlSelect.init('#extractModeReferral');
.
.
.

componentHandler.upgradeDom();

When it is originally set it is populated as expected, the text field contains the expected text, the drop down has the expected options.

However as soon as you click on the control or any other control on the page the contents of the text field vanishes.

If you select an option from the menu, the text field components is populated. There are 5 of these pulldowns but I have only included the one for clarity

Sure I am doing something daft but anyone got an idea what?