fix: Prevent multiple dropdowns opening at once (#33046)

This closes already open dropdown menus when opening another dropdown
menu, to prevent them from overlapping each other.
This commit is contained in:
Yusuf Musleh
2023-08-17 19:37:57 +01:00
committed by GitHub
parent ddb092c07c
commit 6b22286afd
2 changed files with 19 additions and 1 deletions

View File

@@ -420,6 +420,15 @@ function(
showActionsMenu(event) {
const showActionsButton = event.currentTarget;
const subMenu = showActionsButton.parentElement.querySelector(".wrapper-nav-sub");
// Close all open dropdowns
const elements = document.querySelectorAll("li.action-item.action-actions-menu.nav-item");
elements.forEach(element => {
if (element !== showActionsButton.parentElement) {
element.querySelector('.wrapper-nav-sub').classList.remove('is-shown');
}
});
// Code in 'base.js' normally handles toggling these dropdowns but since this one is
// not present yet during the domReady event, we have to handle displaying it ourselves.
subMenu.classList.toggle("is-shown");
@@ -452,7 +461,7 @@ function(
event.preventDefault();
this.pasteUnit(event);
});
element.find('.action-actions-menu').click((event) => {
element.find('.show-actions-menu-button').click((event) => {
this.showActionsMenu(event);
});
},

View File

@@ -356,6 +356,15 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
showXBlockActionsMenu: function(event) {
const showActionsButton = event.currentTarget;
const subMenu = showActionsButton.parentElement.querySelector('.wrapper-nav-sub');
// Close all open dropdowns
const elements = document.querySelectorAll("li.action-item.action-actions-menu.nav-item");
elements.forEach(element => {
if (element !== showActionsButton.parentElement) {
element.querySelector('.wrapper-nav-sub').classList.remove('is-shown');
}
});
// Code in 'base.js' normally handles toggling these dropdowns but since this one is
// not present yet during the domReady event, we have to handle displaying it ourselves.
subMenu.classList.toggle('is-shown');