Topic: Dropdown and Datepicker
Hi, i have the following problem and I hope you can help me. I hava a dropdown with two datepickers in it.
Expected behavior I whant the dowdown to sty open when a date is clicked on the datepicker.
Actual behavior The dropdown closes when clicking a date on the datepicker. Yes, I tryed to use the data-mdb-auto-close="false" option and there it works but I still whant to close the dropdown by clicking outside. So, this is not a solution for me. I also have tried to use the open.mdb.datepicker event to change the Auto-Close option of the dropdown as long as the dicker ist open but I have problems to do that.
Resources (screenshots, code snippets etc.) Here is ma snopped ... https://mdbootstrap.com/snippets/standard/twoeyes/3514218
Here is the JS Code for disabling the Auto-Close ... it is not working ...
const dateFrom = document.getElementById('div_DateFrom');
if (dateFrom) {
dateFrom.addEventListener('open.mdb.datepicker', (e) => {
console.debug('dateFrom - addEventListener: open.mdb.datepicker');
const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
const dropdownList = dropdownElementList.map((dropdownToggleEl) => {
return new mdb.Dropdown(dropdownToggleEl);
});
if (dropdownList) {
dropdownList.autoClose = false;
}
});
}
Hi Michal, thanks for your help an for the code! Now it works as expected. But I also have to add a Select-Element to the Dropdown and then I have the same problem as with the calendar controls. I modified my snipped with the Select-Element where you can see the behavior.
https://mdbootstrap.com/snippets/standard/twoeyes/3514218
Is there also a way to disable the "autoclose" of the Select-Element? The main dropdown should stay open!
Thanks and best regards
Michał Duszak staff commented 3 years ago
Hello, here's snippet with working select. Does this behaviour work as expected? https://mdbootstrap.com/snippets/standard/m-duszak/3531445
Best regards
Hello! I'm afraid update method or changing autoClose value won't work as expected here. But I have written some JS that will mimic the autoClose behaviour. We will set autoClose to false, and use this custom method from the snippet:
https://mdbootstrap.com/snippets/standard/m-duszak/3516751#js-tab-view
It watches for clicks while the dropdown is opened, and checks if click happened inside or outside dropdown/datepicker menus. See if this workaround suits your needs.
JS from above snippet:
const dropdownEl = document.querySelector('.dropdown-toggle')
const dropdown = mdb.Dropdown.getInstance(dropdownEl)
document.addEventListener('show.mdb.dropdown', (e) => {
document.addEventListener('click', handleDropdownClose)
})
document.addEventListener('hide.mdb.dropdown', (e) => {
document.removeEventListener('click', handleDropdownClose)
})
function handleDropdownClose(e) {
let item = e.target
if ((item.nodeName === 'HTML') || (item.nodeName === 'BODY')) {
dropdown.hide()
}
while ((item.nodeName != 'HTML') && (item.nodeName != 'BODY')) {
if (item.classList.contains('dropdown-menu') || item.classList.contains('datepicker-dropdown-container') || item.classList.contains('dropdown-toggle')) {
break;
}
if (item.parentNode) {
item = item.parentNode
}
if ((item.nodeName === 'HTML') || (item.nodeName === 'BODY')) {
dropdown.hide()
}
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.1
- Device: PC
- Browser: All
- OS: Win11
- Provided sample code: No
- Provided link: Yes