Dynamic usage with react

[acollazomayer]

Hi, im trying to use this with react and react router. It is working fine when I reload the page. However when I enter to a page through an inside page link it stops working. I read that adding this:

getmdlSelect.init('select');

Might help with it. However the getmdlSelect function is not defined. I imported the js and the css.

[andyconlin]

Hi @acollazomayer, I just had the same issue (dynamic init, but not with react). If my assumption is correct, your css selector should refer to the the container div of the whole select sytem.

This worked for me:

getmdlSelect.init('.getmdl-select')

My implementation was essentially the example:

<!-- Simple Select with arrow -->
<div class="mdl-textfield mdl-js-textfield getmdl-select getmdl-select__fix-height">
  <input type="text" value="" class="mdl-textfield__input" id="cityName" readonly>
  <input type="hidden" value="" name="cityName">
  <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>

  <ul id="cityNameUl" for="cityName" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
    <li class="mdl-menu__item" data-val="Boston">Boston</li>-->
    <!-- etc. -->
  </ul>
</div>

Hopefully you can get yours working, if it's still an issue for you.