Multiple select dropdown search box in modal not working

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.) https://mdbootstrap.com/snippets/standard/magnus/5101873

Add comment

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 "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'
  })
});

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 => {
  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 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 e.target.addEventListener with 'hide.mdb.modal' event.

Add comment

Magnus priority answered 1 year ago

0 0 Best answer

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?

Add comment

Quang Huy Nguyễn priority answered 1 year ago

0 0 Best answer