The widget value is still editable or not hidden when converted to input.

[comfyui-wiki]

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

[dosubot]

The current frontend behavior is that widgets remain visible and editable even after being linked or "converted" to inputs—this is intentional and part of the new "Widget Input Socket" model. The editable state is controlled by properties like readonly or disabled in the UI logic, but unless these are set, the widget stays editable by design. If you want the widget to be non-editable after conversion, you would need to explicitly set these properties in your node or widget configuration. See discussion.

For the input dot style: the dot appears when the widget is properly linked to an input socket. To ensure the dot is shown after automatic conversion, the node should add an input with the widget linked by name, for example:
node.addInput(inputName, 'STRING', { widget: { name: inputName } })
and create the widget with node.addWidget(). This linkage triggers the input dot style in the UI. See maintainer explanation.

If your widget is dynamically created and not linked to an input socket, or its type isn't recognized, it may not show the dot or behave as expected. Double-check your node definition and widget registration to ensure proper linkage and type support.

Let me know if you need details on where to set these properties in your code!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[christian-byrne]

Claude findings

Vue widgets missing connection-aware readonly state. Current readonly prop only reflects parent state, not input connection status. Need to check isInputConnected(getWidgetInputIndex(widget)) in NodeWidgets.vue to disable widgets when links are attached.