Topic: Multiple select dropdown search box in modal not working

Magnus priority asked 1 year 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 1 year 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'),{

Mateusz Lazaru staff commented 1 year 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 1 year 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 1 year 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 1 year ago

you should read this enter link description here

Mateusz Lazaru staff commented 1 year 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

  • ForumUser: 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