Show native context menu on input elements

newcat · Jan 13, 2024 · 8b35e1a · 8b35e1a
1 parent b3d9a04
commit 8b35e1a
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/packages/renderer-vue/src/commands/hotkeyHandler.ts b/packages/renderer-vue/src/commands/hotkeyHandler.ts
@@ -1,6 +1,5 @@
 import { ref } from "vue";
-
-const INPUT_ELEMENT_TAGS = ["INPUT", "TEXTAREA", "SELECT"];
+import { isInputElement } from "../utility";
 
 export function useHotkeyHandler(executeCommand: (name: string) => void) {
     const pressedKeys = ref<string[]>([]);
@@ -11,7 +10,7 @@ export function useHotkeyHandler(executeCommand: (name: string) => void) {
             pressedKeys.value.push(ev.key);
         }
 
-        if (INPUT_ELEMENT_TAGS.includes(document.activeElement?.tagName ?? "")) {
+        if (document.activeElement && isInputElement(document.activeElement)) {
             return;
         }
 

diff --git a/packages/renderer-vue/src/editor/Editor.vue b/packages/renderer-vue/src/editor/Editor.vue
@@ -13,7 +13,7 @@
         @wheel.self="panZoom.onMouseWheel"
         @keydown="keyDown"
         @keyup="keyUp"
-        @contextmenu.prevent="contextMenu.open"
+        @contextmenu="contextMenu.open"
     >
         <slot name="background">
             <Background />

diff --git a/packages/renderer-vue/src/editor/contextMenu.ts b/packages/renderer-vue/src/editor/contextMenu.ts
@@ -2,7 +2,7 @@ import { Ref, computed, ref, reactive } from "vue";
 import { AbstractNode } from "@baklavajs/core";
 import { IMenuItem } from "../contextmenu";
 import { IBaklavaViewModel } from "../viewModel";
-import { useNodeCategories, useTransform } from "../utility";
+import { isInputElement, useNodeCategories, useTransform } from "../utility";
 
 export function useContextMenu(viewModel: Ref<IBaklavaViewModel>) {
     const show = ref(false);
@@ -63,6 +63,11 @@ export function useContextMenu(viewModel: Ref<IBaklavaViewModel>) {
     });
 
     function open(ev: MouseEvent) {
+        if (ev.target instanceof Element && isInputElement(ev.target)) {
+            return;
+        }
+
+        ev.preventDefault();
         show.value = true;
         const target = ev.target as Element;
         const element = target.closest(".baklava-node");

diff --git a/packages/renderer-vue/src/utility/index.ts b/packages/renderer-vue/src/utility/index.ts
@@ -1,3 +1,4 @@
+export * from "./isInputElements";
 export * from "./nodePosition";
 export * from "./useDragMove";
 export * from "./useGraph";

diff --git a/packages/renderer-vue/src/utility/isInputElements.ts b/packages/renderer-vue/src/utility/isInputElements.ts
@@ -0,0 +1,5 @@
+const INPUT_ELEMENT_TAGS = ["INPUT", "TEXTAREA", "SELECT"];
+
+export function isInputElement(el: Element) {
+    return INPUT_ELEMENT_TAGS.includes(el.tagName);
+}