Merge pull request #5926 from akolson/auto-close-rte-menus-on-click

Close RTE dropdowns on mousedown instead of click

Author: akolson

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue

@@ -535,7 +535,7 @@
           window.addEventListener('resize', handleWindowResize, { passive: true });
         }
 
-        document.addEventListener('click', handleClickOutside, { passive: true });
+        document.addEventListener('mousedown', handleClickOutside, { passive: true });
       });
 
       onUnmounted(() => {
@@ -544,7 +544,7 @@
         } else {
           window.removeEventListener('resize', handleWindowResize);
         }
-        document.removeEventListener('click', handleClickOutside);
+        document.removeEventListener('mousedown', handleClickOutside);
       });
 
       return {

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue

@@ -1,6 +1,7 @@
 <template>
 
   <div
+    ref="containerRef"
     class="dropdown-container"
     @keydown="handleContainerKeydown"
   >
@@ -65,6 +66,7 @@
         showHeadersDropdown: isOpen,
         toggleHeadersDropdown: toggleDropdown,
         selectFormat,
+        containerRef,
       } = useDropdowns();
 
       const { handleFormatChange } = useToolbarActions();
@@ -193,6 +195,7 @@
         handleContainerKeydown,
         textFormatOptions$,
         formatOptions$,
+        containerRef,
       };
     },
   });

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue

@@ -1,6 +1,7 @@
 <template>
 
   <div
+    ref="containerRef"
     class="dropdown-container paste-button-container"
     @keydown="handleContainerKeydown"
   >
@@ -78,6 +79,7 @@
         pasteOptions,
         showPasteDropdown: isOpen,
         togglePasteDropdown: toggleDropdown,
+        containerRef,
       } = useDropdowns();
 
       const { handlePaste } = useToolbarActions();
@@ -214,6 +216,7 @@
         paste$,
         pasteOptions$,
         pasteOptionsMenu$,
+        containerRef,
       };
     },
   });

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js

@@ -77,31 +77,27 @@ export function useDropdowns() {
     selectedFormat.value = format.label;
   };
 
-  const handleClickOutside = event => {
-    const dropdownContainers = document.querySelectorAll('.dropdown-container');
-    let isOutside = true;
-
-    dropdownContainers.forEach(container => {
-      if (container.contains(event.target)) {
-        isOutside = false;
-      }
-    });
+  const containerRef = ref(null);
 
-    if (isOutside) {
-      closeAllDropdowns();
+  // Each instance checks only its own container so
+  // clicking one dropdown's trigger closes the other.
+  const handleClickOutside = event => {
+    if (!containerRef.value || containerRef.value.contains(event.target)) {
+      return;
     }
+    closeAllDropdowns();
   };
 
   onMounted(() => {
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
     // Setup editor listener when component mounts
     setupEditorListener();
     // Initial format detection
     updateSelectedFormat();
   });
 
   onUnmounted(() => {
-    document.removeEventListener('click', handleClickOutside);
+    document.removeEventListener('mousedown', handleClickOutside);
     if (offTransaction) offTransaction();
   });
 
@@ -149,5 +145,6 @@ export function useDropdowns() {
     togglePasteDropdown,
     selectFormat,
     updateSelectedFormat,
+    containerRef,
   };
 }