[Bug]: "On trigger" mode in "CLIP Text Encode (Prompt)" node block causes text and input fields to overlap

[patrick-csliu]

Frontend Version

v1.2.47 { "system": { "os": "nt", "comfyui_version": "v0.2.2", "python_version": "3.11.9 (tags/v3.11.9:de54cf5, Apr 2 2024, 10:12:12) [MSC v.1938 64 bit (AMD64)]", "pytorch_version": "2.4.1+cu124", "embedded_python": true, "argv": [ "ComfyUI\main.py", "--windows-standalone-build" ] }, }

Expected Behavior

When selecting "On trigger" in the mode option from the right-click menu in the "CLIP Text Encode (Prompt)" node block, the input/output text and text fields should be displayed clearly and aligned properly.

Actual Behavior

Steps to Reproduce

1. Add a "CLIP Text Encode (Prompt)" node block.
2. Right-click on the node block and select the "Mode" option.
3. Set the mode to "On trigger."
4. Observe how the input/output text and text fields are squeezed together and misaligned.

Debug Logs

Nope

Browser Logs

index.html:4 ComfyUI Front-end version: 1.2.47
chext_driver.js:505 Initialized driver at: Thu Sep 26 2024 04:27:57 GMT+0800 (台北標準時間)
chext_loader.js:71 Initialized chextloader at: 1727296077715
api.ts:73 

       GET http://127.0.0.1:8188/api/userdata/workflows%2F.index.json 404 (Not Found)
fetchApi @ api.ts:73
getUserData @ api.ts:565
loadWorkflows @ workflows.ts:99
setup @ app.ts:1855
await in setup
(anonymous) @ GraphCanvas.vue:105
(anonymous) @ runtime-core.esm-bundler.js:1808
callWithErrorHandling @ runtime-core.esm-bundler.js:195
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:202
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:1788
flushPostFlushCbs @ runtime-core.esm-bundler.js:379
render @ runtime-core.esm-bundler.js:5805
mount @ runtime-core.esm-bundler.js:3062
app2.mount @ runtime-dom.esm-bundler.js:1530
(anonymous) @ main.ts:40
Show 8 more frames
Show less
api.ts:73 

       GET http://127.0.0.1:8188/api/userdata?recurse=true&dir=workflows&split=true net::ERR_ABORTED 404 (Not Found)
fetchApi @ api.ts:73
listUserData @ api.ts:658
loadWorkflows @ workflows.ts:108
await in loadWorkflows
setup @ app.ts:1855
await in setup
(anonymous) @ GraphCanvas.vue:105
(anonymous) @ runtime-core.esm-bundler.js:1808
callWithErrorHandling @ runtime-core.esm-bundler.js:195
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:202
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:1788
flushPostFlushCbs @ runtime-core.esm-bundler.js:379
render @ runtime-core.esm-bundler.js:5805
mount @ runtime-core.esm-bundler.js:3062
app2.mount @ runtime-dom.esm-bundler.js:1530
(anonymous) @ main.ts:40
Show 8 more frames
Show less
components-manager.js:767 Empty components: policy ignored
api.ts:73 

       GET http://127.0.0.1:8188/api/userdata/workflows%2F.index.json net::ERR_ABORTED 404 (Not Found)
fetchApi @ api.ts:73
getUserData @ api.ts:565
loadWorkflows @ workflows.ts:99
load @ workflows.ts:378
#updateActive @ workflows.ts:92
setWorkflow @ workflows.ts:173
loadGraphData @ app.ts:2229
app2.loadGraphData @ changeTracker.ts:102
app.loadGraphData @ components-manager.js:771
loadWorkflow @ app.ts:1898
setup @ app.ts:1905
await in setup
(anonymous) @ GraphCanvas.vue:105
(anonymous) @ runtime-core.esm-bundler.js:1808
callWithErrorHandling @ runtime-core.esm-bundler.js:195
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:202
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:1788
flushPostFlushCbs @ runtime-core.esm-bundler.js:379
render @ runtime-core.esm-bundler.js:5805
mount @ runtime-core.esm-bundler.js:3062
app2.mount @ runtime-dom.esm-bundler.js:1530
(anonymous) @ main.ts:40
Show 8 more frames
Show less
api.ts:73 

       GET http://127.0.0.1:8188/api/userdata?recurse=true&dir=workflows&split=true net::ERR_ABORTED 404 (Not Found)
fetchApi @ api.ts:73
listUserData @ api.ts:658
loadWorkflows @ workflows.ts:108
await in loadWorkflows
load @ workflows.ts:378
#updateActive @ workflows.ts:92
setWorkflow @ workflows.ts:173
loadGraphData @ app.ts:2229
app2.loadGraphData @ changeTracker.ts:102
app.loadGraphData @ components-manager.js:771
loadWorkflow @ app.ts:1898
setup @ app.ts:1905
await in setup
(anonymous) @ GraphCanvas.vue:105
(anonymous) @ runtime-core.esm-bundler.js:1808
callWithErrorHandling @ runtime-core.esm-bundler.js:195
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:202
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:1788
flushPostFlushCbs @ runtime-core.esm-bundler.js:379
render @ runtime-core.esm-bundler.js:5805
mount @ runtime-core.esm-bundler.js:3062
app2.mount @ runtime-dom.esm-bundler.js:1530
(anonymous) @ main.ts:40
Show 8 more frames
Show less

What browsers do you use to access the UI ?

Google Chrome

Other

Custom nodes ComfyUI-Manager UltimateSDUpscale Browser CHROME VERSION: 129.0.6668.71

[webfiltered]

@patrick-csliu if you are happy to share, I'm curious about what you're using the onTrigger mode for. I've noticed several bugs regarding this system, but I hadn't bothered fixing any as I wasn't aware anyone was using it.

[patrick-csliu]

Oops, sorry! I posted this in the wrong repo. This should be in ComfyUI_frontend.

@webfiltered Nothing, I’m new here and just exploring the interfaces to learn how everything works. I happened to come across this bug while trying out different options.

[patrick-csliu]

I’ve reposted the issue in the correct repository here: https://github.com/Comfy-Org/ComfyUI_frontend/issues/983. Can we go ahead and close this issue? Thanks!

[webfiltered]

@patrick-csliu No problem! You posted where you meant to - just HCL moved the issue here, as that system is from LiteGraph.

I'm not sure if there are plans to use the event/trigger system, but afaik it is not implemented in frontend (or even functional in LiteGraph). It may be better to simply remove it from the context menus.

[patrick-csliu]

Oh, I see, my issue was moved here. I didn’t know GitHub had that feature, so I thought I made a mistake and created a new one. @webfiltered I’ll leave it up to you to decide whether to proceed with this issue😊

[mijuku233]

This is an invalid feature in comfyui. It doesn't make much sense to discuss it, and it's not worth letting developers waste energy on it. If you are curious about on trigger, you can check out ComfyBox