Laravel-Backpack / community-forum

A workspace to discuss improvement and feature ideas, before they're actually implemented.
28 stars 0 forks source link

[Bug] Dropdown doesn't expand when child menu item is active #865

Closed iAdil closed 7 months ago

iAdil commented 7 months ago

Bug report

What I did

Tabler theme vertical dark menu does not automatically expands when children menu nav is active

What I expected to happen

show class name should be added "nav-link dropdown-toggle show"

What happened

after clicking to the link the dropdown stays collapsed

What I've already tried to fix it

??

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there? Yes

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

LARAVEL VERSION:

10.46.0.0

BACKPACK PACKAGE VERSIONS:

backpack/basset: 1.2.4 backpack/crud: 6.6.5 backpack/generators: v4.0.4 backpack/permissionmanager: 7.1.1 backpack/pro: 2.1.8 backpack/theme-tabler: 1.2.5

Demo app has this code in tabler.js file:

document.querySelectorAll('header a.nav-link.dropdown-toggle').forEach(function (el) {
    if (!el.getAttribute("data-bs-auto-close")) {
        el.dataset.bsAutoClose = 'true';
    }
});
document.querySelectorAll('aside a.nav-link.dropdown-toggle').forEach(function (el) {
    if (!el.getAttribute("data-bs-auto-close")) {
        el.dataset.bsAutoClose = 'false';
    }
});
[...document.querySelectorAll('aside a[href], header.top a[href]')].filter(el => window.location.href.split("#")[0].split("?")[0] === el.href).forEach(el => {
    while (/(nav-item|nav-link|dropdown)/.test(el.className)) {
        if (el.previousElementSibling?.dataset.bsAutoClose === 'false') {
            el.classList.add('show');
        }
        let container = el.parentElement?.parentElement;
        let parentContainer = container;
        while (parentContainer.classList.contains('dropend')) {
            parentContainer.querySelector('a.dropdown-toggle').classList.add('active');
            parentContainer = parentContainer.parentElement?.parentElement;
        }
        if (parentContainer.parentElement.parentElement.parentElement.parentElement.tagName.toLowerCase() === 'aside') {
            parentContainer.querySelector('a.dropdown-toggle').classList.add('show');
            parentContainer.querySelector('div.dropdown-menu').classList.add('show');
            [...parentContainer.querySelectorAll('.active')].forEach(function (activeDropdown) {
                if (activeDropdown.classList.contains('dropdown-toggle') && activeDropdown !== el) {
                    activeDropdown.classList.add('show');
                    activeDropdown.nextElementSibling.classList.add('show');
                }
            });
        } else if (parentContainer.classList.contains('nav-item')) {
            parentContainer.classList.add('active');
            parentContainer.querySelector('a.dropdown-toggle').addEventListener('click', function () {
                [...parentContainer.querySelectorAll('.active')].forEach(function (activeDropdown) {
                    if (activeDropdown.classList.contains('dropdown-toggle') && activeDropdown !== el) {
                        setTimeout(function () {
                            activeDropdown.click();
                        }, 10);
                    }
                });
            });
        }
        el.classList.add('active');
        el = el.parentElement;
    }
});

Mine doesnt have.

How update the lates tabler.js version?

backpack:require:theme-tabler returns Tabler (default) was already installed

The Gihub tabler.js file also doesn't have this Demo js behavior: https://github.com/Laravel-Backpack/theme-tabler/blob/main/resources/assets/js/tabler.js

pxpm commented 7 months ago

Hello @iAdil

Thanks for the report. That code was removed as it was breaking other stuff it shouldn't. It was a very very bad code produced to quickly fix a hole in rush times. 😞

I've been working on this last days and I think I am getting to a solution am I happy with. I think I will be able to finish the PR in the next couple hours and launch a fixed version.

Cheers

pxpm commented 7 months ago

This was fixed in 1.2.6.

Please do a composer update to get the fixed version.

Thanks for the report @iAdil 🙏