El siguiente es un ejemplo de un menú desplegable implementado en Google MDL Javascript y 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>

Y aquí está el javascript que llena ese menú desplegable

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

Cuando se establece originalmente, se completa como se esperaba, el campo de texto contiene el texto esperado, el menú desplegable tiene las opciones esperadas.

Sin embargo, en cuanto hace clic en el control o en cualquier otro control de la página, el contenido del campo de texto desaparece.

Si selecciona una opción del menú, se completan los componentes del campo de texto. Hay 5 de estos menús desplegables, pero solo he incluido uno para mayor claridad.

Claro que estoy haciendo algo tonto, pero ¿alguien tiene una idea de qué?