From 6b22286afda0450446ec0ef0e66e1b922fea0fcf Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Thu, 17 Aug 2023 19:37:57 +0100
Subject: [PATCH] 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.
---
 cms/static/js/views/course_outline.js  | 11 ++++++++++-
 cms/static/js/views/pages/container.js |  9 +++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/cms/static/js/views/course_outline.js b/cms/static/js/views/course_outline.js
index d8ae241a37..f7da4ab29f 100644
--- 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
index b1ec303bd5..83a3c177d1 100644
--- 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');