Multiple select dropdown search box in modal not working


Topic: Multiple select dropdown search box in modal not working

Magnus pro premium priority asked 2 years 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.) https://mdbootstrap.com/snippets/standard/magnus/5101873


Quang Huy Nguyễn pro premium priority answered 2 years ago

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

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

mlazaru staff commented 2 years 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 => {
  e.target.id = '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),{
    container:'#just-add-an-id-attr'
  })
});

Quang Huy Nguyễn pro premium priority commented 2 years 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 e.target.addEventListener with 'hide.mdb.modal' event.


Quang Huy Nguyễn pro premium priority answered 2 years ago

you should read this enter link description here


mlazaru staff commented 2 years ago

It should do the job. Thanks for the answer!


Magnus pro premium priority answered 2 years 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?


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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