orchidsoftware
Dropdown menus do not close
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
Screenshots
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
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.
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.
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();
}
