Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown menus do not close #2911

Open
Dinver opened this issue Oct 24, 2024 · 2 comments
Open

Dropdown menus do not close #2911

Dinver opened this issue Oct 24, 2024 · 2 comments
Assignees
Labels

Comments

@Dinver
Copy link

Dinver commented Oct 24, 2024

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):

  • OS: Windows 10
  • Browser: chrome 130.0.6723.69, firefox 124.0.2

Smartphone (please complete the following information):

  • Device: Xiaomi Mi 13 Ultra
  • OS: Android 14
  • Browser: chrome 128.0.6613.146

Server (please complete the following information):

  • Platfrom Version: 14.37.0
  • Laravel Version: 10
  • PHP Version: 8.1
  • Database: MySql
  • Database Version: 8
@tabuna
Copy link
Member

tabuna commented Oct 25, 2024

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.

@tabuna tabuna added Feedback and removed Errors labels Oct 25, 2024
@Dinver
Copy link
Author

Dinver commented Oct 25, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

2 participants