fix(workflow-editor): correlate drag-release palette selection with a token

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -209,6 +209,7 @@ interface AddBlockFromToolbarDetail {
   type?: unknown
   enableTriggerMode?: unknown
   presetOperation?: unknown
+  connectToken?: unknown
 }
 
 /**
@@ -539,6 +540,7 @@ const WorkflowContent = React.memo(
       source: { nodeId: string; handleId: string }
       screenX: number
       screenY: number
+      token: string
     } | null>(null)
 
     /** Stores start positions for multi-node drag undo/redo recording. */
@@ -1984,18 +1986,21 @@ const WorkflowContent = React.memo(
           return
         }
 
-        const { type, enableTriggerMode, presetOperation } = event.detail
+        const { type, enableTriggerMode, presetOperation, connectToken } = event.detail
 
         if (typeof type !== 'string' || !type) return
         if (type === 'connectionBlock') return
 
-        // Consume a pending drag-release only while the restricted connect-palette
-        // it opened is still up — never let an unrelated add-block event (toolbar,
-        // sidebar, command list) inherit its position/source.
-        const searchModal = useSearchModalStore.getState()
+        // Consume a pending drag-release only when THIS event is the palette
+        // selection it opened, matched by correlation token. Any other
+        // add-block event (toolbar, sidebar, command list) carries no matching
+        // token and cannot inherit the pending position/source.
+        const pendingRef = pendingConnectRef.current
         const pending =
-          searchModal.isOpen && searchModal.sections ? pendingConnectRef.current : null
-        pendingConnectRef.current = null
+          pendingRef && typeof connectToken === 'string' && connectToken === pendingRef.token
+            ? pendingRef
+            : null
+        if (pending) pendingConnectRef.current = null
 
         let basePosition = getViewportCenter()
         if (pending) {
@@ -3205,13 +3210,16 @@ const WorkflowContent = React.memo(
           // Released on empty canvas: open the command palette and remember the
           // drag origin + drop point so the chosen block lands here, wired from
           // this source handle.
+          const connectToken = generateId()
           pendingConnectRef.current = {
             source: { nodeId: source.nodeId, handleId: source.handleId },
             screenX: clientPos.clientX,
             screenY: clientPos.clientY,
+            token: connectToken,
           }
           useSearchModalStore.getState().open({
             sections: ['blocks', 'tools', 'toolOperations'],
+            connectToken,
           })
         }
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx

@@ -351,6 +351,7 @@ export function SearchModal({
           detail: {
             type: block.type,
             enableTriggerMode,
+            connectToken: useSearchModalStore.getState().connectToken,
           },
         })
       )
@@ -368,7 +369,11 @@ export function SearchModal({
     (op: SearchToolOperationItem) => {
       window.dispatchEvent(
         new CustomEvent('add-block-from-toolbar', {
-          detail: { type: op.blockType, presetOperation: op.operationId },
+          detail: {
+            type: op.blockType,
+            presetOperation: op.operationId,
+            connectToken: useSearchModalStore.getState().connectToken,
+          },
         })
       )
       captureEvent(posthogRef.current, 'search_result_selected', {

apps/sim/stores/modals/search/store.ts

@@ -68,18 +68,23 @@ export const useSearchModalStore = create<SearchModalState>()(
     (set, _) => ({
       isOpen: false,
       sections: null,
+      connectToken: null,
       data: initialData,
 
       setOpen: (open: boolean) => {
-        set({ isOpen: open, sections: null })
+        set({ isOpen: open, sections: null, connectToken: null })
       },
 
       open: (options) => {
-        set({ isOpen: true, sections: options?.sections ?? null })
+        set({
+          isOpen: true,
+          sections: options?.sections ?? null,
+          connectToken: options?.connectToken ?? null,
+        })
       },
 
       close: () => {
-        set({ isOpen: false, sections: null })
+        set({ isOpen: false, sections: null, connectToken: null })
       },
 
       initializeData: (filterBlocks) => {

apps/sim/stores/modals/search/types.ts

@@ -91,20 +91,30 @@ export interface SearchModalState {
    */
   sections: SearchSection[] | null
 
+  /**
+   * Correlation token for the open session. When the palette is opened to
+   * complete a specific action (e.g. an edge drag-release), the opener passes a
+   * token that a selection stamps onto its event, so only that selection — not
+   * an unrelated concurrent add — can consume the pending action. `null` for
+   * ordinary opens.
+   */
+  connectToken: string | null
+
   /** Pre-computed search data. */
   data: SearchData
 
   /**
    * Explicitly set the open state of the modal. Always resets to the full
-   * palette (no section restriction).
+   * palette (no section restriction, no correlation token).
    */
   setOpen: (open: boolean) => void
 
   /**
    * Convenience method to open the modal. Pass `sections` to restrict the
-   * palette to a subset of result groups.
+   * palette to a subset of result groups, and `connectToken` to correlate a
+   * selection with a pending action.
    */
-  open: (options?: { sections?: SearchSection[] }) => void
+  open: (options?: { sections?: SearchSection[]; connectToken?: string }) => void
 
   /**
    * Convenience method to close the modal.