Topic: Multiple select dropdown search box in modal not working

Magnus priority asked 2 months ago

Expected behavior Multiple select dropdown search box in the modal is expected to take a value.

Actual behavior The search-box is disabled.

Resources (screenshots, code snippets etc.)

Quang Huy Nguyễn priority answered 2 months ago

I dont use that Bootbox lib but base on your snippet you get the modal element by "" then set id attribute to it:

document.addEventListener('show.mdb.modal', e => { = 'just-add-an-id-attr';
  const mySelect = new mdb.Select(document.getElementById('mySelect'),{

mlazaru staff commented 2 months ago

In your code new instance is created every time modal opens. That's something we should avoid. Add a line of code to check if the select was already initialized or not.

document.addEventListener('show.mdb.modal', e => { = 'just-add-an-id-attr';
  const selectEl = document.getElementById('mySelect')
  const selectInstance = mdb.Select.getInstance(selectEl)

  // create new select instance only if it doesn't exist yet
  !selectInstance &&  new mdb.Select(selectEl),{

Quang Huy Nguyễn priority commented 2 months ago

In this case it has to be created new every time since the select element in the html tab just a template text and only serve as an html element when it gets copied into new modal generated by the "Bootbox lib". Anyways if you concern about instance problem you can dispose it by using with 'hide.mdb.modal' event.

Magnus priority answered 2 months ago

My modal is created dynamically and so the component is re-initialized as you see in the code example. However when its re-initialized the search box becomes disabled. How can it be reinitialized so that the search box remains enabled?

Quang Huy Nguyễn priority answered 2 months ago

you should read this enter link description here

mlazaru staff commented 2 months ago

It should do the job. Thanks for the answer!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: PC
  • Browser: Crome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes