From f8490d09394066eada7b3f3f876e229705b7f229 Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Tue, 21 Oct 2025 12:36:08 -0700
Subject: [PATCH] Fix links to wrong slots in vue mode (#6181)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Error is divided into 2 parts
- A widget lacking slotMetadata would create a slot overwriting the
index 0 slot
- Slot data wasn't reactive. Any dynamic widgets would not have
slotMetadata
<img width="1065" height="436" alt="image"
src="https://github.com/user-attachments/assets/c83b04fb-3b3a-4abb-8b68-99b305336348"
/>

See #5705
- Describes incorrect links internal to subgraphs. Likely a different,
already solved issue

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6181-Fix-links-to-wrong-slots-in-vue-mode-2936d73d36508136ad43d8c818bf9fba)
by [Unito](https://www.unito.io)
---
 src/composables/graph/useGraphNodeManager.ts  | 22 +++++++++----------
 .../vueNodes/components/NodeWidgets.vue       |  5 +++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index 522c06ef1..4de069410 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -126,14 +126,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     // Extract safe widget data
     const slotMetadata = new Map<string, WidgetSlotMetadata>()
 
-    node.inputs?.forEach((input, index) => {
-      if (!input?.widget?.name) return
-      slotMetadata.set(input.widget.name, {
-        index,
-        linked: input.link != null
-      })
-    })
-
     const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
     Object.defineProperty(node, 'widgets', {
       get() {
@@ -144,8 +136,15 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       }
     })
 
-    const safeWidgets = reactiveComputed<SafeWidgetData[]>(
-      () =>
+    const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
+      node.inputs?.forEach((input, index) => {
+        if (!input?.widget?.name) return
+        slotMetadata.set(input.widget.name, {
+          index,
+          linked: input.link != null
+        })
+      })
+      return (
         node.widgets?.map((widget) => {
           try {
             // TODO: Use widget.getReactiveData() once TypeScript types are updated
@@ -183,7 +182,8 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
             }
           }
         }) ?? []
-    )
+      )
+    })
 
     const nodeType =
       node.type ||
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index c36a232c7..8e4ed85e9 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -24,16 +24,17 @@
       <!-- Widget Input Slot Dot -->
 
       <div
-        class="z-10 opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+        class="z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100"
       >
         <InputSlot
+          v-if="widget.slotMetadata"
           :slot-data="{
             name: widget.name,
             type: widget.type,
             boundingRect: [0, 0, 0, 0]
           }"
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
-          :index="widget.slotMetadata?.index ?? 0"
+          :index="widget.slotMetadata.index"
           :dot-only="true"
         />
       </div>