Hi!

Most of our components with Select included can be initialized using Javascript OR using HTML Class attribute.

Adding select class to any <select> element will run autoinit and create instance of MDB Select just after page loads. That means, if you will also initialize it manually from JavaScript using new mdb.Select, you will get two instances of the Select component.

To make it simpler - if you want to initialize select using JS, delete the select class from the HTML :)

The close button didn't work because you tried to call close() method for invalid select name - different than you declared.

This is what you've got:

const select = new mdb.Select(selectEl);
closeBtn.addEventListener("click", function(){
  mySelect.close()
});

This is what you need:

const mySelect = new mdb.Select(selectEl);
closeBtn.addEventListener("click", function(){
  mySelect.close()
});

Working snippet:https://mdbootstrap.com/snippets/standard/mlazaru/4822609#js-tab-view