Background/Context

ComfyUI is transitioning from the legacy widget-to-input conversion model to the new Widget Input Socket model (RFC #9). In this new system, widgets and input slots co-exist rather than converting between states. However, the Vue widget rendering system is missing critical logic to automatically disable widgets when their corresponding input slots receive connections.

Problem Statement

Current Behavior:

• ✅ LiteGraph nodes: Widgets become disabled/grayed out when input slots are connected
• ❌ Vue-rendered nodes: Widgets remain fully editable even when input slots are connected
• ❌ Missing visual feedback: No input dot appears when widget has corresponding input slot

Expected Behavior:

• Widgets should automatically become readonly/disabled when their input slots are connected
• Input dots should appear next to widgets that have corresponding input slots
• User should not be able to edit widget values when external connections provide the value

Impact:

• Confusing UX where users can edit values that are overridden by connections
• Inconsistent behavior between LiteGraph and Vue rendering modes
• Blocks confident migration to Vue node system

Technical Root Cause Analysis

Missing Implementation in Vue Widget System:

File: src/renderer/extensions/vueNodes/components/NodeWidgets.vue

• Current: Widgets receive readonly prop only from parent component state
• Missing: Connection-aware readonly calculation based on input slot status

Available Infrastructure (Working Correctly):

• ✅ LGraphNode.isInputConnected(slot: number) - detects if input slot has connection
• ✅ getWidgetInputIndex(widget) - maps widgets to their input slot indices
• ✅ Widget components respect readonly prop when provided
• ✅ NodeInputSlot.isConnected property tracks connection state

The Gap:

// Current implementation (line 46 in NodeWidgets.vue)
readonly={readonly}

// Should be:
readonly={readonly || isInputConnected(getWidgetInputIndex(widget))}

Steps to Reproduce

1. Create a node with widgets in Vue rendering mode (enable area:vue-migration)
2. Create a connection from another node to the widget input slot
3. Observe: Widget remains editable despite having an active input connection
4. Compare: Switch to LiteGraph rendering - widget correctly becomes disabled

Proposed Solution

Primary Fix: Enhance NodeWidgets.vue to calculate connection-aware readonly state

// In NodeWidgets.vue, enhance widget readonly calculation
const getWidgetReadonlyState = (widget: ProcessedWidget): boolean => {
  // Parent readonly state OR widget input is connected
  return readonly || isInputConnected(getWidgetInputIndex(widget))
}

// Apply to widget rendering:
<WidgetComponent 
  :readonly="getWidgetReadonlyState(widget)"
  // ... other props
/>

Secondary Enhancement: Input dot visibility

• Ensure input dots appear for widgets with corresponding input slots
• May require coordination with InputSlot.vue component

Implementation Checklist

Code Changes:

• Modify NodeWidgets.vue to access underlying LiteGraph node
• Add connection detection logic using existing isInputConnected() method
• Test readonly state propagation to all widget types
• Verify input dot appearance for widget-linked inputs

Testing Requirements:

• Test connection/disconnection scenarios
• Verify all widget types respect connection-based readonly state
• Ensure no performance regression with connection checking
• Test edge cases (runtime widgets, converted widgets)

Related Issues & Context

• Referenced in Dosubot comment: #2887 - Widget Input Socket model explanation
• Maintainer explanation: #3875 - How to properly link widgets and inputs
• Architecture: Widget Input Socket RFC - Overall direction

Key Files & Locations

• Primary fix: src/renderer/extensions/vueNodes/components/NodeWidgets.vue:46
• Connection detection: src/lib/litegraph/src/LGraphNode.ts:1113 (isInputConnected)
• Widget mapping: NodeWidgets.vue:176 (getWidgetInputIndex function)
• Widget components: Individual widget files (already handle readonly prop correctly)

Attachments:

• Video: https://github.com/user-attachments/assets/95468d24-8f74-4ac1-b557-4a6c84867add
• Image: https://github.com/user-attachments/assets/71144616-031c-46f6-8bd1-c9fbcdcbdd61

┆Issue is synchronized with this Notion page by Unito