The dropdown window doesn't close when you select the new dynamically added rows

[sc30]

Hello, All, From the Github page, for dynamically created mdl, I should use:

getmdlSelect.init('.getmdl-select');
componentHandler.upgradeDom();

My use case is that when I trigger action, for example, click, it will added a new row, I am able to select it but the dropdown window won't close.

I had a look in stackoverflow, but it seems it doesn't answer the question.

Below is my jsfiddle example to show this issue.

Any suggestions on how to fix this problem?

Thanks in advance for the help.

[napcraft]

Hi there,

I am experiencing the same issue and tried to solve it but coudn't.

Any pointers towards what I should be looking into?

My Code that dynamically generates the select List

Thanks!

` function fetchCategories(categoryElement){

var categorySelect = document.getElementById(categoryElement); if(categorySelect.hasChildNodes()){ while (categorySelect.hasChildNodes()) {categorySelect.removeChild(categorySelect.childNodes[0]);} }

categoryRef.on('child_added', function(data) { var catoptions=data.val().name;

//Programitically Generates Category List on Add Post Form : RS 
var selectLi = document.createElement('li');
selectLi.className += "mdl-menu__item";
var liText = catoptions;
selectLi.setAttribute("data-val", liText);
selectLi.setAttribute("id", i);
selectLi.appendChild( document.createTextNode(liText) );
categorySelect.appendChild(selectLi);
getmdlSelect.init('.getmdl-select');
componentHandler.upgradeDom();

return;
});

} `

[ioncodes]

@sc30 @ruhbanshah I had the same problem right now, I just looked at the source and found this: https://github.com/CreativeIT/getmdl-select/blob/master/src/js/getmdl-select.js#L57-L62 According to that i just added this code to my js script:

document.getElementById('ID').addEventListener("change", function (evt) { // on item changed
  // maybe call some code here?
  var dropdown = document.querySelectorAll('.getmdl-select')[0] // maybe replace the 0 with a for loop if you have more than 1 selectfield.
  var menu = dropdown.querySelector('.mdl-js-menu')
  menu['MaterialMenu'].hide() // hide menu
})

This will do it.

[napcraft]

@ioncodes Thanks Luca. I used a workaround to solve this thing in my particular use case, which was that the dropdown list is dynamically generated at run time on client end.

var selectDropDown = document.getElementById('mdlSelectCategory'); selectDropDown.onclick = function(){ var mdl= document.getElementsByClassName('mdl-menu__container'); $(mdl).removeClass('is-visible'); }

Hope this helps others as well, if they face the same problem.

[franckevva]

@ioncodes thank you for your pull request. good work!