fix: node shortcuts active in input fields (#3438)

web/app/components/workflow/hooks/use-nodes-interactions.ts

@@ -721,8 +721,12 @@ export const useNodesInteractions = () => {
 
     const {
       setClipboardElements,
+      shortcutsDisabled,
     } = workflowStore.getState()
 
+    if (shortcutsDisabled)
+      return
+
     const {
       getNodes,
     } = store.getState()
@@ -741,8 +745,12 @@ export const useNodesInteractions = () => {
 
     const {
       clipboardElements,
+      shortcutsDisabled,
     } = workflowStore.getState()
 
+    if (shortcutsDisabled)
+      return
+
     const {
       getNodes,
       setNodes,
@@ -803,6 +811,13 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
+    const {
+      shortcutsDisabled,
+    } = workflowStore.getState()
+
+    if (shortcutsDisabled)
+      return
+
     const {
       getNodes,
     } = store.getState()
@@ -815,7 +830,7 @@ export const useNodesInteractions = () => {
 
     for (const node of nodesToDelete)
       handleNodeDelete(node.id)
-  }, [getNodesReadOnly, handleNodeDelete, store])
+  }, [getNodesReadOnly, handleNodeDelete, store, workflowStore])
 
   return {
     handleNodeDragStart,

web/app/components/workflow/hooks/use-workflow.ts

@@ -331,6 +331,16 @@ export const useWorkflow = () => {
     return nodes.find(node => node.id === nodeId) || nodes.find(node => node.data.type === BlockEnum.Start)
   }, [store])
 
+  const enableShortcuts = useCallback(() => {
+    const { setShortcutsDisabled } = workflowStore.getState()
+    setShortcutsDisabled(false)
+  }, [workflowStore])
+
+  const disableShortcuts = useCallback(() => {
+    const { setShortcutsDisabled } = workflowStore.getState()
+    setShortcutsDisabled(true)
+  }, [workflowStore])
+
   return {
     handleLayout,
     getTreeLeafNodes,
@@ -345,6 +355,8 @@ export const useWorkflow = () => {
     renderTreeFromRecord,
     getNode,
     getBeforeNodeById,
+    enableShortcuts,
+    disableShortcuts,
   }
 }
 

web/app/components/workflow/index.tsx

@@ -125,7 +125,11 @@ const Workflow: FC<WorkflowProps> = memo(({
     handleEdgeDelete,
     handleEdgesChange,
   } = useEdgesInteractions()
-  const { isValidConnection } = useWorkflow()
+  const {
+    isValidConnection,
+    enableShortcuts,
+    disableShortcuts,
+  } = useWorkflow()
 
   useOnViewportChange({
     onEnd: () => {
@@ -161,6 +165,8 @@ const Workflow: FC<WorkflowProps> = memo(({
         edgeTypes={edgeTypes}
         nodes={nodes}
         edges={edges}
+        onPointerDown={enableShortcuts}
+        onMouseLeave={disableShortcuts}
         onNodeDragStart={handleNodeDragStart}
         onNodeDrag={handleNodeDrag}
         onNodeDragStop={handleNodeDragStop}

web/app/components/workflow/store.ts

@@ -65,6 +65,8 @@ type Shape = {
   setCustomTools: (tools: ToolWithProvider[]) => void
   clipboardElements: Node[]
   setClipboardElements: (clipboardElements: Node[]) => void
+  shortcutsDisabled: boolean
+  setShortcutsDisabled: (shortcutsDisabled: boolean) => void
 }
 
 export const createWorkflowStore = () => {
@@ -111,6 +113,8 @@ export const createWorkflowStore = () => {
     setCustomTools: customTools => set(() => ({ customTools })),
     clipboardElements: [],
     setClipboardElements: clipboardElements => set(() => ({ clipboardElements })),
+    shortcutsDisabled: false,
+    setShortcutsDisabled: shortcutsDisabled => set(() => ({ shortcutsDisabled })),
   }))
 }