fix: keep locked widget hover color consistent with node color (Comfy-Org#14387)

<!-- ccr-slack-attribution -->
_Requested by **Christian Byrne** · [Slack
thread](https://comfy-organization.slack.com/archives/C0A4XMHANP3/p1784139879572499?thread_ts=1784139879.572499&cid=C0A4XMHANP3)_

## Summary

Hovering over a locked (connected-input) text or textarea widget on a
custom-colored node showed a generic gray hover background instead of
one consistent with the node's color.

## Changes

- **What**: `WidgetInputText.vue` and `WidgetTextarea.vue`
unconditionally applied
`hover:bg-component-node-widget-background-hovered`, even when the field
was read-only/disabled. That opaque hover color overrode the translucent
`background-disabled` overlay locked fields use at rest — the overlay is
what lets a node's custom color show through. The hover class is now
gated behind `!isReadOnly`, matching the existing `not-disabled:hover`
pattern already used by sibling widgets (`WidgetInputNumberSlider`,
`WidgetSelectDefault`, `FormDropdownInput`).

## Review Focus

- The fix removes the hover background entirely for locked fields rather
than deriving a colored hover variant — this matches the existing
convention for disabled/locked controls elsewhere in the same widget
folder (no hover affordance on non-interactive fields), rather than
introducing a new color-derivation mechanism.

## Testing

- Added a Vitest unit test to `WidgetInputText.test.ts` and
`WidgetTextarea.test.ts` asserting the hover class is present when
editable and omitted when read-only/disabled (confirmed the new tests
fail against the pre-fix component).
- Added a Playwright e2e test
(`browser_tests/tests/vueNodes/widgets/text/lockedWidgetHoverColor.spec.ts`)
with a new workflow fixture
(`browser_tests/assets/vueNodes/linked-string-widget-color.json`) that
loads a custom-colored node with a widget locked via a connected input,
and asserts its background color is unchanged on hover (unlike a normal
editable widget's).

## Screenshots (if applicable)

N/A — see the added e2e test for the behavior this fixes.

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: bymyself <cbyrne@comfy.org>
Co-authored-by: GitHub Action <action@github.com>

Author: 5 people

browser_tests/assets/vueNodes/linked-string-widget-color.json

@@ -0,0 +1,61 @@
+{
+  "id": "3d3c9d1a-5a0f-4b1e-9d9b-2e8d1c2f6a11",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "DevToolsNodeWithOnlyOptionalInput",
+      "pos": [400, 100],
+      "size": [270, 160],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "title": "Locked Widget Target",
+      "inputs": [
+        {
+          "name": "text",
+          "type": "STRING",
+          "widget": { "name": "text" },
+          "link": 1
+        },
+        { "name": "clip", "type": "CLIP", "link": null, "shape": 7 }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithOnlyOptionalInput"
+      },
+      "widgets_values": ["Locked multiline text"],
+      "color": "#232",
+      "bgcolor": "#353"
+    },
+    {
+      "id": 2,
+      "type": "PrimitiveStringMultiline",
+      "pos": [24, 100],
+      "size": [270, 140],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "title": "String Source",
+      "inputs": [],
+      "outputs": [{ "name": "STRING", "type": "STRING", "links": [1] }],
+      "properties": {
+        "Node name for S&R": "PrimitiveStringMultiline"
+      },
+      "widgets_values": ["locked_prefix"]
+    }
+  ],
+  "links": [[1, 2, 0, 1, 1, "STRING"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.45.4"
+  },
+  "version": 0.4
+}

browser_tests/tests/vueNodes/widgets/text/lockedWidgetHoverColor.spec.ts

@@ -0,0 +1,66 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe(
+  'Vue Locked Widget Hover Styling',
+  { tag: ['@vue-nodes', '@widget', '@screenshot'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'vueNodes/linked-string-widget-color'
+      )
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.canvasOps.resetView()
+    })
+
+    test('keeps a locked field on a custom-colored node the same on hover instead of turning generic gray', async ({
+      comfyPage
+    }) => {
+      const targetNode = comfyPage.vueNodes.getNodeByTitle(
+        'Locked Widget Target'
+      )
+      const lockedInput = comfyPage.vueNodes.getWidgetByName(
+        'Locked Widget Target',
+        'text'
+      )
+      // proxy check: covers both link-locked and hardcoded read_only cases
+      await expect(lockedInput).toHaveAttribute('readonly', '')
+
+      // Hovering the locked field must not replace its (node-color-tinted)
+      // background with the app's opaque generic hover gray, so the node's
+      // custom color should still show through in the screenshot.
+      //
+      // The native `disabled` attribute on the locked textarea makes it
+      // `pointer-events: none` (see Textarea.vue's `disabled:pointer-events-none`
+      // class), so the browser never delivers pointer events to it directly —
+      // hovering must instead target its parent, which is the actual element
+      // carrying the hover background class this test is verifying.
+      await lockedInput.locator('..').hover()
+      await comfyPage.expectScreenshot(
+        targetNode,
+        'locked-widget-hover-color.png'
+      )
+    })
+
+    test('editable field on the same node still shows the generic hover background', async ({
+      comfyPage
+    }) => {
+      const sourceNode = comfyPage.vueNodes.getNodeByTitle('String Source')
+      const editableInput = comfyPage.vueNodes.getWidgetByName(
+        'String Source',
+        'value'
+      )
+
+      await expect(editableInput).toBeVisible()
+      await editableInput.hover()
+      await comfyPage.expectScreenshot(
+        sourceNode,
+        'editable-widget-hover-color.png'
+      )
+    })
+  }
+)

browser_tests/tests/vueNodes/widgets/text/lockedWidgetHoverColor.spec.ts-snapshots/editable-widget-hover-color-chromium-linux.png

@@ -170,6 +170,40 @@ describe('WidgetInputText Value Binding', () => {
     })
   })
 
+  describe('Locked Field Hover Styling', () => {
+    // Tests assert on the Tailwind class name directly because that's the
+    // mechanism being guarded — a rename would need a baseline update anyway.
+    const HOVER_CLASS = 'hover:bg-component-node-widget-background-hovered'
+
+    it('omits the generic hover background class when the field is locked (read-only)', () => {
+      const widget = createInputTextWidget('locked value', {
+        read_only: true
+      })
+      renderComponent(widget, 'locked value')
+
+      const input = screen.getByRole('textbox')
+      expect(input.className).not.toContain(HOVER_CLASS)
+    })
+
+    it('omits the generic hover background class when the field is disabled by a link', () => {
+      const widget = createInputTextWidget('linked value', {
+        disabled: true
+      })
+      renderComponent(widget, 'linked value')
+
+      const input = screen.getByRole('textbox')
+      expect(input.className).not.toContain(HOVER_CLASS)
+    })
+
+    it('applies the generic hover background class when the field is editable', () => {
+      const widget = createInputTextWidget('editable value')
+      renderComponent(widget, 'editable value')
+
+      const input = screen.getByRole('textbox')
+      expect(input.className).toContain(HOVER_CLASS)
+    })
+  })
+
   describe('Edge Cases', () => {
     it('handles very long strings', async () => {
       const widget = createInputTextWidget('short')

browser_tests/tests/vueNodes/widgets/text/lockedWidgetHoverColor.spec.ts-snapshots/locked-widget-hover-color-chromium-linux.png

@@ -12,7 +12,8 @@
         :class="
           cn(
             WidgetInputBaseClass,
-            'w-full px-4 hover:bg-component-node-widget-background-hovered',
+            'w-full px-4',
+            !isReadOnly && 'hover:bg-component-node-widget-background-hovered',
             size === 'large' ? 'py-3 text-sm' : 'py-2 text-xs',
             loading && 'pl-9'
           )

src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts

@@ -220,6 +220,44 @@ describe('WidgetTextarea Value Binding', () => {
     })
   })
 
+  describe('Locked Field Hover Styling', () => {
+    // Tests assert on the Tailwind class name directly because that's the
+    // mechanism being guarded — a rename would need a baseline update anyway.
+    const HOVER_CLASS = 'hover:bg-component-node-widget-background-hovered'
+
+    it('omits the generic hover background class from the wrapper when read-only', () => {
+      const widget = createTextareaWidget('locked value', {
+        read_only: true
+      })
+      const { container } = renderComponent(widget, 'locked value')
+
+      // hover class lives on wrapper <div>, not the <textarea>
+      // eslint-disable-next-line testing-library/no-node-access
+      const wrapper = container.firstElementChild
+      expect(wrapper?.className).not.toContain(HOVER_CLASS)
+    })
+
+    it('omits the generic hover background class from the wrapper when disabled', () => {
+      const widget = createTextareaWidget('linked value', { disabled: true })
+      const { container } = renderComponent(widget, 'linked value')
+
+      // hover class lives on wrapper <div>, not the <textarea>
+      // eslint-disable-next-line testing-library/no-node-access
+      const wrapper = container.firstElementChild
+      expect(wrapper?.className).not.toContain(HOVER_CLASS)
+    })
+
+    it('applies the generic hover background class to the wrapper when editable', () => {
+      const widget = createTextareaWidget('editable value')
+      const { container } = renderComponent(widget, 'editable value')
+
+      // hover class lives on wrapper <div>, not the <textarea>
+      // eslint-disable-next-line testing-library/no-node-access
+      const wrapper = container.firstElementChild
+      expect(wrapper?.className).toContain(HOVER_CLASS)
+    })
+  })
+
   describe('Edge Cases', () => {
     it('handles very long text', async () => {
       const widget = createTextareaWidget('short')

src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue

@@ -2,7 +2,8 @@
   <div
     :class="
       cn(
-        'group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered',
+        'group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted',
+        !isReadOnly && 'hover:bg-component-node-widget-background-hovered',
         widget.borderStyle
       )
     "