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

This closes already open dropdown menus when opening another dropdown menu, to prevent them from overlapping each other.
eduNEXT · Aug 17, 2023 · 6b22286 · 6b22286
1 parent ddb092c
commit 6b22286
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/cms/static/js/views/course_outline.js b/cms/static/js/views/course_outline.js
@@ -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);
             });
         },

diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
@@ -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');