Dropdown and Datepicker


Topic: Dropdown and Datepicker

twoeyes pro premium priority asked 7 months 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 ... 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;
        }
    });
}

twoeyes pro premium priority answered 7 months 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.

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 7 months ago

Hello, here's snippet with working select. Does this behaviour work as expected? https://mdbootstrap.com/snippets/standard/m-duszak/3531445

Best regards


Michał Duszak staff answered 7 months 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: 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()
        }
    }
} 

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