From 8a1deea7f24a662a12de9561726512b622485085 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Wed, 20 May 2026 10:49:32 +0300
Subject: [PATCH 1/3] close dropdowns on mousedown instead of click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ProseMirror calls preventDefault() on mouseup when repositioning the
cursor, and ToolbarButton uses @mousedown.prevent — both suppress the
click event per the HTML spec. Switching the document listener to
mousedown makes dropdown close reliable for all interactions inside the
editor.

Fixes #5886

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../TipTapEditor/TipTapEditor/components/EditorToolbar.vue    | 4 ++--
 .../TipTapEditor/TipTapEditor/composables/useDropdowns.js     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
index 41e6f73add..0abd2b3f7c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
+++ b/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 {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
index 311d77706c..c66d8b2e5e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
@@ -93,7 +93,7 @@ export function useDropdowns() {
   };
 
   onMounted(() => {
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
     // Setup editor listener when component mounts
     setupEditorListener();
     // Initial format detection
@@ -101,7 +101,7 @@ export function useDropdowns() {
   });
 
   onUnmounted(() => {
-    document.removeEventListener('click', handleClickOutside);
+    document.removeEventListener('mousedown', handleClickOutside);
     if (offTransaction) offTransaction();
   });
 

From 4b3b2f8d97a207f0fc7c74cc349aa6c7484589a5 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 26 May 2026 14:24:44 +0300
Subject: [PATCH 2/3] scope click-outside check to each dropdown's own
 container

Replaces the global querySelectorAll('.dropdown-container') with a
per-instance containerRef, so clicking one dropdown's trigger correctly
closes the other instead of being treated as an inside click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/toolbar/FormatDropdown.vue       |  3 +++
 .../components/toolbar/PasteDropdown.vue        |  3 +++
 .../TipTapEditor/composables/useDropdowns.js    | 17 ++++++-----------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
index 053ed5b76d..7d5b2a4a1f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
+++ b/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,
       };
     },
   });
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue
index e80705dda4..4d29e019e5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue
+++ b/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,
       };
     },
   });
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
index c66d8b2e5e..0a3cfa90f5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
@@ -77,19 +77,13 @@ 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();
+  const handleClickOutside = event => {
+    if (!containerRef.value || containerRef.value.contains(event.target)) {
+      return;
     }
+    closeAllDropdowns();
   };
 
   onMounted(() => {
@@ -149,5 +143,6 @@ export function useDropdowns() {
     togglePasteDropdown,
     selectFormat,
     updateSelectedFormat,
+    containerRef,
   };
 }

From f90ab0561d5339376c5a1bd2ca155c3d81a0c6ee Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 26 May 2026 15:08:20 +0300
Subject: [PATCH 3/3] add comment to handleClickOutside in useDropdowns

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../views/TipTapEditor/TipTapEditor/composables/useDropdowns.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
index 0a3cfa90f5..8b1d69c847 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useDropdowns.js
@@ -79,6 +79,8 @@ export function useDropdowns() {
 
   const containerRef = ref(null);
 
+  // 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;