fix: context menu handling in folder tree

Author: antonreshetov

src/renderer/components/sidebar/folders/Tree.vue

@@ -48,8 +48,6 @@ const {
 const { state } = useApp()
 const { clearSnippetsState } = useSnippets()
 
-const contextMenuTriggerRef = useTemplateRef('contextMenuTriggerRef')
-
 const hoveredNodeId = ref('')
 const isHoveredByIdDisabled = ref(false)
 const contextNode = ref<Node | null>(null)
@@ -85,21 +83,8 @@ function toggleNode(node: Node) {
   return emit('toggleNode', node)
 }
 
-/**
- * Поскольку в TreeNode есть @contextmenu.stop, то для того чтобы
- * предотвратить высплытие в родительский узел для корректной подсветки,
- * используем программную отправку события contextmenu.
- * Так же такое решение избавит от n кол-ва ContextMenu на каждый узел.
- */
-function contextMenu(node: Node, event: MouseEvent) {
+function contextMenu(node: Node) {
   contextNode.value = node
-  contextMenuTriggerRef.value?.dispatchEvent(
-    new MouseEvent('contextmenu', {
-      bubbles: false,
-      clientX: event.clientX,
-      clientY: event.clientY,
-    }),
-  )
 }
 
 async function onDeleteFolder() {
@@ -221,10 +206,7 @@ provide(treeKeys, {
     <div class="scrollbar h-full min-h-0 overflow-x-hidden overflow-y-auto">
       <ContextMenu.Root>
         <ContextMenu.Trigger as-child>
-          <div
-            ref="contextMenuTriggerRef"
-            data-folder-tree
-          >
+          <div data-folder-tree>
             <TreeNode
               v-for="(node, index) in modelValue"
               :key="node.id"

src/renderer/components/sidebar/folders/TreeNode.vue

@@ -151,7 +151,7 @@ function onClickNode(id: string | number, event?: MouseEvent) {
   clickNode(Number(id), event)
 }
 
-function onClickContextMenu(e: MouseEvent) {
+function onClickContextMenu() {
   highlightedFolderIds.value.clear()
   highlightedFolderIds.value.add(Number(props.node.id))
 
@@ -165,7 +165,7 @@ function onClickContextMenu(e: MouseEvent) {
   }
 
   highlightedSnippetIds.value.clear()
-  contextMenu(props.node, e)
+  contextMenu(props.node)
 }
 
 function onDragStart(e: DragEvent) {
@@ -340,7 +340,6 @@ if (focusHandler)
     @dragend.stop="onDragEnd"
     @drop.stop="onDrop"
     @dragover.prevent
-    @contextmenu.stop="onClickContextMenu"
   >
     <div
       :id="String(node.id)"
@@ -357,6 +356,7 @@ if (focusHandler)
       @dragenter.stop="onDragEnter"
       @dragover="onDragOver"
       @click="(event) => onClickNode(node.id, event)"
+      @contextmenu="onClickContextMenu"
     >
       <span class="node__name relative z-10 flex w-full items-center">
         <div

src/renderer/components/sidebar/folders/keys.ts

@@ -7,7 +7,7 @@ export interface TreeInjection {
   focusHandler?: (isFocused: Ref<boolean>) => void
   isHoveredByIdDisabled: Ref<boolean>
   toggleNode: (node: Node) => void
-  contextMenu: (node: Node, event: MouseEvent) => void
+  contextMenu: (node: Node) => void
 }
 
 export const treeKeys: InjectionKey<TreeInjection> = Symbol('tree')