Topic: Dropdown and Datepicker

twoeyes priority asked 2 years ago

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 ...

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 = []'.dropdown-toggle'));
        const dropdownList = => {
            return new mdb.Dropdown(dropdownToggleEl);
        if (dropdownList) {
            dropdownList.autoClose = false;

twoeyes priority answered 2 years ago

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.

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 2 years ago

Hello, here's snippet with working select. Does this behaviour work as expected?

Best regards

Michał Duszak staff answered 2 years ago

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:

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 =

    if ((item.nodeName === 'HTML') || (item.nodeName === 'BODY')) {

    while ((item.nodeName != 'HTML') && (item.nodeName != 'BODY')) {
        if (item.classList.contains('dropdown-menu') || item.classList.contains('datepicker-dropdown-container') || item.classList.contains('dropdown-toggle')) {

        if (item.parentNode) {
            item = item.parentNode

        if ((item.nodeName === 'HTML') || (item.nodeName === 'BODY')) {

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 3.10.1
  • Device: PC
  • Browser: All
  • OS: Win11
  • Provided sample code: No
  • Provided link: Yes