Topic: Multiple select dropdown search box in modal not working
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
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.
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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