[Bug]: widget created dynamically can't be converted as input

[numz]

Frontend Version

Hi,

In previous versions of comfyui_frontend, we could convert a widget as an input even if the widget was dynamically created by the node.

This option has been removed in favor of the automatic conversion method when trying to connect to the input. However, this only works if the nodes have well-defined types (INT, STRING, etc.) in my INPUT_TYPES class.

However, when an input isn't defined in the INPUT_TYPES class (because it's created on the fly by the node), it no longer works.

I suppose that the widget-to-input conversion function must check the properties in INPUT_NODE, and if there isn't a matching type, the widget-to-input conversion doesn't work.

So my question is, is this a bug? An oversight? Or a feature that has simply disappeared?
Is there a way to tell if a widget can be converted to an input when creating the widget?

Expected Behavior

when i used the following code to create a STRING widget (in previous version) :

ComfyWidgets.STRING(
                    node,
                    "default",
                    ["STRING", { default: "" }],
                    app
                );

I have this :

and when I want connect the string input :

then :

Actual Behavior

in version 0.3.33 and 1.18.9 :

and when I want to connect to input the little dot doesn't appear and not connectable:

Steps to Reproduce

bug.json

Debug Logs

nothing in logs

Browser Logs

nothing

Setting JSON

no change, default settings

What browsers do you use to access the UI ?

No response

Other Information

all kind of browser

┆Issue is synchronized with this Notion page by Unito

[webfiltered]

The subtle difference is that with the new behaviour, there simply is no conversion. An input is always created up-front for every widget that does not have the socketless flag set in python def. I believe if you follow the same process, you should get the same result (but to be clear, I've not directly tested this).

[webfiltered]

In case you're unaware, there is a plan for proper support: https://github.com/Comfy-Org/rfcs/blob/dynamic_inputs/rfcs/0000-variable-length-node-inputs.md

[numz]

Hi @webfiltered ,

Thanks for informations. And yes I was unaware.

By the way, I don't really understand what I have to do to correct this...

Do I have to create an input first then use the convertToWidget() method? or something else...

Sorry I really don't understand how to use "socketless"...

Do I have to do this:
widget.options.socketless = true

after the :

ComfyWidgets.STRING(
                    node,
                    "default",
                    ["STRING", { default: "" }],
                    app
                );

or maybe something like this ?:

ComfyWidgets.STRING(
                    node,
                    "default",
                    ["STRING", { default: "",  socketless: true}],
                    app
                );

Regards

[webfiltered]

If you're adding widgets purely via JavaScript, you effectively need to mimic what is going on in the ComfyNode constructor:

ComfyUI_frontend/src/services/litegraphService.ts

Lines 137 to 188 in b152f67

	/**
	* @internal Add a widget to the node. For both primitive types and custom widgets
	* (unless `socketless`), an input socket is also added.
	*/
	#addInputWidget(inputSpec: InputSpec) {
	const widgetInputSpec = { ...inputSpec }
	if (inputSpec.widgetType) {
	widgetInputSpec.type = inputSpec.widgetType
	}
	const inputName = inputSpec.name
	const nameKey = `${this.#nodeKey}.inputs.${normalizeI18nKey(inputName)}.name`
	const widgetConstructor = widgetStore.widgets.get(widgetInputSpec.type)
	if (!widgetConstructor || inputSpec.forceInput) return
	const {
	widget,
	minWidth = 1,
	minHeight = 1
	} = widgetConstructor(
	this,
	inputName,
	transformInputSpecV2ToV1(widgetInputSpec),
	app
	) ?? {}
	if (widget) {
	widget.label = st(nameKey, widget.label ?? inputName)
	widget.options ??= {}
	Object.assign(widget.options, {
	advanced: inputSpec.advanced,
	hidden: inputSpec.hidden
	})
	}
	if (!widget?.options?.socketless) {
	const inputSpecV1 = transformInputSpecV2ToV1(widgetInputSpec)
	this.addInput(inputName, inputSpec.type, {
	shape: inputSpec.isOptional ? RenderShape.HollowCircle : undefined,
	localized_name: st(nameKey, inputName),
	widget: { name: inputName, [GET_CONFIG]: () => inputSpecV1 }
	})
	}
	this.#initialMinSize.width = Math.max(
	this.#initialMinSize.width,
	minWidth
	)
	this.#initialMinSize.height = Math.max(
	this.#initialMinSize.height,
	minHeight
	)
	}

The highlights are:

1. Create a widget: node.addWidget()
   • In this function it happens inside widgetConstructor
2. Create an input (socket): node.addInput()
   • The third param is what links the input and widget, e.g.:

     const inputName = "default"
     node.addInput(inputName, "STRING", { widget: { name: inputName } })

ComfyWidgets.STRING() runs addWidget() for you.

The socketless property is something you can specify in a python node definition; it prevents an input socket from being created.

[numz]

Thank you very much :)

regards !!