From f9aa9ead40871b91d74049ea16f6cd0b93657c19 Mon Sep 17 00:00:00 2001
From: Artem Nistuley <artem@harbourshare.com>
Date: Wed, 25 Feb 2026 17:26:51 +0200
Subject: [PATCH 1/2] fix: outside click for toolbar dropdown

---
 .../src/components/toolbar/ButtonGroup.vue    | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/super-editor/src/components/toolbar/ButtonGroup.vue b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
index a0e8ed0f0e..ff5db0b750 100644
--- a/packages/super-editor/src/components/toolbar/ButtonGroup.vue
+++ b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, h } from 'vue';
+import { computed, ref, h, onMounted, onBeforeUnmount } from 'vue';
 import ToolbarButton from './ToolbarButton.vue';
 import ToolbarSeparator from './ToolbarSeparator.vue';
 import OverflowMenu from './OverflowMenu.vue';
@@ -9,6 +9,7 @@ import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
 const emit = defineEmits(['command', 'item-clicked', 'dropdown-update-show']);
 
 const toolbarItemRefs = ref([]);
+const buttonGroupRef = ref(null);
 const props = defineProps({
   toolbarItems: {
     type: Array,
@@ -210,10 +211,32 @@ const handleDropdownUpdateShow = (open) => {
   }
   emit('dropdown-update-show', open);
 };
+
+const handleDocumentPointerDown = (event) => {
+  if (!currentItem.value) return;
+
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) return;
+
+  // Naive UI dropdown content is rendered in a portal outside the toolbar group.
+  // Treat it as "inside" so option clicks do not close the menu before selection.
+  if (target.closest('.sd-toolbar-dropdown-menu')) return;
+  if (buttonGroupRef.value?.contains(target)) return;
+
+  closeDropdowns();
+};
+
+onMounted(() => {
+  document.addEventListener('pointerdown', handleDocumentPointerDown, true);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', handleDocumentPointerDown, true);
+});
 </script>
 
 <template>
-  <div :style="getPositionStyle" class="button-group" role="group" @focus="handleFocus">
+  <div :style="getPositionStyle" class="button-group" role="group" @focus="handleFocus" ref="buttonGroupRef">
     <div
       v-for="(item, index) in toolbarItems"
       :key="item.id.value"
@@ -249,6 +272,7 @@ const handleDropdownUpdateShow = (open) => {
           () => ({
             role: 'menu',
             style: { fontFamily: props.uiFontFamily },
+            class: 'sd-toolbar-dropdown-menu',
           })
         "
         :node-props="(option) => getDropdownAttributes(option, item)"

From debdde57e66d414e257dc52a3d08e2236e283cd6 Mon Sep 17 00:00:00 2001
From: Artem Nistuley <artem@harbourshare.com>
Date: Thu, 26 Feb 2026 12:08:55 +0200
Subject: [PATCH 2/2] fix: attach events via watch

---
 .../src/components/toolbar/ButtonGroup.vue    | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/super-editor/src/components/toolbar/ButtonGroup.vue b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
index ff5db0b750..17bc7088c8 100644
--- a/packages/super-editor/src/components/toolbar/ButtonGroup.vue
+++ b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, h, onMounted, onBeforeUnmount } from 'vue';
+import { computed, ref, h, watch, onBeforeUnmount } from 'vue';
 import ToolbarButton from './ToolbarButton.vue';
 import ToolbarSeparator from './ToolbarSeparator.vue';
 import OverflowMenu from './OverflowMenu.vue';
@@ -226,9 +226,24 @@ const handleDocumentPointerDown = (event) => {
   closeDropdowns();
 };
 
-onMounted(() => {
-  document.addEventListener('pointerdown', handleDocumentPointerDown, true);
-});
+const isCurrentItemExpanded = () => {
+  if (!currentItem.value) return false;
+  const { expand } = currentItem.value;
+  if (typeof expand === 'object' && expand !== null) return Boolean(expand.value);
+  return Boolean(expand);
+};
+
+watch(
+  isCurrentItemExpanded,
+  (isOpen) => {
+    if (isOpen) {
+      document.addEventListener('pointerdown', handleDocumentPointerDown, true);
+    } else {
+      document.removeEventListener('pointerdown', handleDocumentPointerDown, true);
+    }
+  },
+  { immediate: true },
+);
 
 onBeforeUnmount(() => {
   document.removeEventListener('pointerdown', handleDocumentPointerDown, true);