From 79fee6ac7218fba40daf3631baa821f767e8d533 Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Fri, 17 Jan 2025 03:50:53 +1100
Subject: [PATCH] Fix collapsed node textarea causes UI inconsistency (#2267)

---
 browser_tests/assets/collapsed_multiline.json | 37 +++++++++++++++++++
 browser_tests/domWidget.spec.ts               | 27 ++++++++++++++
 src/scripts/domWidget.ts                      |  6 +++
 3 files changed, 70 insertions(+)
 create mode 100644 browser_tests/assets/collapsed_multiline.json
 create mode 100644 browser_tests/domWidget.spec.ts

diff --git a/browser_tests/assets/collapsed_multiline.json b/browser_tests/assets/collapsed_multiline.json
new file mode 100644
index 000000000..d2977074d
--- /dev/null
+++ b/browser_tests/assets/collapsed_multiline.json
@@ -0,0 +1,37 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CLIPTextEncode",
+      "pos": [20, 50],
+      "size": [400, 200],
+      "flags": { "collapsed": true },
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null,
+          "localized_name": "clip"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null,
+          "localized_name": "CONDITIONING"
+        }
+      ],
+      "properties": {},
+      "widgets_values": ["Should not be displayed."]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "version": 0.4
+}
diff --git a/browser_tests/domWidget.spec.ts b/browser_tests/domWidget.spec.ts
new file mode 100644
index 000000000..4d8cc6f27
--- /dev/null
+++ b/browser_tests/domWidget.spec.ts
@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('DOM Widget', () => {
+  test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('collapsed_multiline')
+
+    expect(comfyPage.page.locator('.comfy-multiline-input')).not.toBeVisible()
+  })
+
+  test('Multiline textarea correctly collapses', async ({ comfyPage }) => {
+    const multilineTextAreas = comfyPage.page.locator('.comfy-multiline-input')
+    const firstMultiline = multilineTextAreas.first()
+    const lastMultiline = multilineTextAreas.last()
+
+    await expect(firstMultiline).toBeVisible()
+    await expect(lastMultiline).toBeVisible()
+
+    const nodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+    for (const node of nodes) {
+      await node.click('collapse')
+    }
+    await expect(firstMultiline).not.toBeVisible()
+    await expect(lastMultiline).not.toBeVisible()
+  })
+})
diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts
index c85bade36..428672fad 100644
--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -417,6 +417,12 @@ LGraphNode.prototype.addDOMWidget = function <
     element.dataset.collapsed = this.flags?.collapsed ? 'true' : 'false'
   }
 
+  const { onConfigure } = this
+  this.onConfigure = function () {
+    onConfigure?.apply(this, arguments)
+    element.dataset.collapsed = this.flags?.collapsed ? 'true' : 'false'
+  }
+
   const onRemoved = this.onRemoved
   this.onRemoved = function () {
     element.remove()