Destroy/Remove selects

[viniciussalvati]

While developing a Single page application, I noticed there is no way to remove, or destroy a material select. I can remove the select tag, but the ul created for styling is not removed, and I couldn't find any way to remove it with the jQuery library provided. This can become a problem as the user navigates through the application and the DOM elements don't get removed, resulting in a memory leak.

The best way to do it is adding a overload to $.fn.material_select(), passing an argument to destroy the select. So it would be something like

$('#myselect').material_select('destroy');

Another way would be with an jQuery event, kind of like angularjs does:

$('#myselect').trigger('$destroy'); //angularjs uses the $destroy event before removing directives.

After a quick look at your code, I think I can implement either for you. Just tell me what of the options you want and I'll fork it and implement it.

[acburst]

On the latest version, we rewrote material_select to destroy old instances on reinitialization

[carlosperate]

Has this been implemented into master? Because I have just downloaded the latest materialize, and each new $('select').material_select(); keeps creating a new "ul" element with the new data. (Don't know if it affects your implementation the fact that I replace the html DOM select element with a new one with the same id and name).

[viniciussalvati]

I saw the code, but I'm not reinitializing the material_select. I'm removing it entirely from the Document. It's not being recreated. It's going away. If it comes back, it will be an entirely new select element, so, if I call material_select on the new tag, a new ul would be created, without the old one being removed.

[Dogfalo]

In my test, the old select is removed.

[carlosperate]

This is probably no different than the issue I was discussing in #452 . As I said there I replace the select element with a new one in the following manner:

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

Each time the $('select').material_select() is triggered it adds a new dropdown, and both the old stylized input element and the new one are updated to the latest version (but any older than that stays the same). 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 ...>

[Dogfalo]

What is the point of oldSelect.parentNode.replaceChild(newSelect, oldSelect);?

[carlosperate]

To create a new select element to replace the old instead of trying to edit the old one. There are a few reasons why having something like that reduces significantly the amount of js code I had to write.

[viniciussalvati]

makes sense. It's simply to create a new select than compare the options and change/add/remove what's necessary.
Even if it wasn't the case, there was still the case of the select permanently being removed, and we end up with an ul not being removed.

[ganySA]

I cannot seem to get material_select() to overwrite the existing control. It actually does nothing if run again.

[ganySA]

@viniciusmelquiades @Dogfalo

Sorry to be a bit of a nuisance on this one. But i've probably put about 12 hours into the various select problems.

Could you explain a little more how you fixed the select issue....
I have looked at the 'destroy' commit code it seems like a one liner... which doesnt seem to do much...

I am using the meteor build on atmosphere. There are two issues that i am facing referenced by other issues logged

1. i have tried almost everything to get rid of the dropdowns but nothing that is mentioned on the issue forums works. Firstly executing .material_select() does not re-init based on new values. In fact it does nothing. I looked the commit code but that also if i run that manually does nothing.
2. Secondly in some circumstances the scrollbar on the dropdown menu does not work, using the mouse works, however when you physically click on the scroll bar it just closes the menu? is this a known issue?

I would also ask a question regarding re-building all these components. Would a better approach have not to use tried and tested components e.g select2 and simply skin it for materialize css. This would seem more practical than trying to rebuild a whole world of functionality that already exists....

[viniciussalvati]

@ganySA I don't really understand your problem. This issue is regarding removing junk left by the select. Calling .material_select() reloaded the select with the new options, last time I checked, and the pull request allows us to call .material_select('destroy') to get rid of the junk and return the select to it's uninitialized state.

Although you have a good point about select2, that's something to be discussed in another issue.

[ganySA]

@viniciusmelquiades the problem was fixed on meteor in the latest version.

The second problem is still there and only works with mouse scroller but there is an open issue around that. #901

[viniciussalvati]

@ganySA Then we should use that issue to discuss that problem. This one doesn't have anything to do with the scroll problem.

[isaachinman]

+1 for select2

[Ragsboss]

+1 for select2

[danilodequeiroz]

+1 for select2

[Whip]

I was still facing issues with the junk left on re-initialize so I've created a pull request to fix that. See if it helps you.

[apudiu]

I'm done with this junk framework...

[Whip]

Please keep in mind that this framework is still in beta.