Allow to refresh a dropdown (dropdown and material selects)

[255kb]

When dynamically updating select's options or dropdown items, the dropdown created on the fly by the framework is not refreshed.
It would be useful to allow one to do material_select(true), where true would trigger a simple refresh of the element rather than a full rendering.

[carlosperate]

+1
Just encountered this issue as well, a way to trigger a refresh would be very helpful.
The documentation states that you will need a separate call for any dynamically generated select elements your page generates..
However when the replaceChild() function is used to replace a select element with a new one, materialize will still keep the old dropdown and create a second one with the new data.

[carlosperate]

I know you guys must be really busy, but I would really appreciate it if this could get looked into. Any eta for this feature fix?

[Cerealkillerway]

+1

[alexjp]

+1 for using it with Ember JS

[Dogfalo]

Added in a06d9a4. Recalling the plugin will refresh the select.

[carlosperate]

I just downloaded the latest master, and recalling the plugging in my case will refresh the old ul element, but it still creates an additional one without removing the old.
So the main difference is that while before only the new ul element contained the correct value, now both do.

[Dogfalo]

I'm not seeing a second ul being created when I reinitialize.

[carlosperate]

In my case I replace the select element in the DOM using javascript. So the document already has a select menu, which then I get by Id and replace with a new select element with the same name and id. I do this by doing something along the lines of this:

oldSelect.parentNode.replaceChild(newSelect, oldSelect);
$('select').material_select();

Don't know if this helps, but every time the $('select').material_select(); is triggered I end up with another nested select_wrapper div in the DOM, with the original select element at its core, more or less as follows:

<div class='select_wrapper'>
   <input type="text" class="select-dropdown" ...>
   <i class="mdi-navigation-arrow-drop-down" ...>
   <div class='select_wrapper'>
      <input type="text" class="select-dropdown" ...>
      <i class="mdi-navigation-arrow-drop-down" ...>
      <div class='select_wrapper'>
         <input type="text" class="select-dropdown" ...>
         <i class="mdi-navigation-arrow-drop-down" ...>
         <select ...>

[brendanoh]

For anyone working in Ember.js who finds this issue in the future here is how I solved the re-rendering of the select. Wrap it in a {{#with}}{{/with}}.

 {{#with filteredBusinessTypes as |types|}}
  <div class="row">
    <div class="input-field col s12">
      {{md-select content=types value=businessType label="Specific Business Type" prompt="Please choose..." optionLabelPath="content.name" optionValuePath="content"}}
    </div>
  </div>
 {{/with}}

Without the with it never updates. With it - it does.

[ghost]

not possible with selects . It will close the window when added new options .