orchidsoftware / platform

Orchid is a @laravel package that allows for rapid application development of back-office applications, admin/user panels, and dashboards.
https://orchid.software
MIT License
4.45k stars 655 forks source link

Dropdown menus do not close #2911

Open Dinver opened 1 month ago

Dinver commented 1 month ago

Describe the bug When opening a filter window, other filters windows do not close.

To Reproduce Steps to reproduce the behavior: Open some filter windows

Expected behavior Close open filter windows demo

Screenshots image

image

Desktop (please complete the following information):

Smartphone (please complete the following information):

Server (please complete the following information):

tabuna commented 1 month ago

Your example demonstrates the default behavior that was used previously, though it has certain drawbacks.

When clicking on any item, the drop-down closes—even in cases where it doesn't imply a selection. For instance, try clicking on the separator in your example, and the drop-down will close.

image

This behavior is also present when using select fields from the package or other elements, which significantly impacts usability.

In the past, we attempted to close the drop-down only when clicking higher up in the DOM tree, but if I remember correctly, that approach proved somewhat unstable.

I’d be glad if you’re interested in refining this functionality.

Dinver commented 1 month ago

In my opinion, the correct behavior is to close all open ones when opening a new one. This is also the standard behavior in most interfaces.

managed to solve it by fix filter_controller.js

onMenuClick(event) {
        const currentTarget = event.target.closest('.dropdown');
        const dropdowns = document.querySelectorAll('.dropdown');
        dropdowns.forEach(dropdown => {
            if (currentTarget !== dropdown) {
                const dd = new window.Bootstrap.Dropdown(dropdown);
                dd.hide();
            }

        });
        event.stopPropagation();
    }

demo