fix: test(changeTracker): add regression test for multilineOrOptions forwarding in wrapped prompt (#9418)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/composables/element/useDomValueBridge.test.ts

@@ -1,78 +0,0 @@
-import { nextTick } from 'vue'
-import { describe, expect, it } from 'vitest'
-
-import { useDomValueBridge } from './useDomValueBridge'
-
-function createInput(initialValue = ''): HTMLInputElement {
-  const el = document.createElement('input')
-  el.value = initialValue
-  return el
-}
-
-function createTextarea(initialValue = ''): HTMLTextAreaElement {
-  const el = document.createElement('textarea')
-  el.value = initialValue
-  return el
-}
-
-describe('useDomValueBridge', () => {
-  it('initializes the ref with the current element value', () => {
-    const el = createInput('hello')
-    const bridged = useDomValueBridge(el)
-    expect(bridged.value).toBe('hello')
-  })
-
-  it('updates the ref when element.value is set programmatically', () => {
-    const el = createInput('')
-    const bridged = useDomValueBridge(el)
-
-    el.value = 'updated'
-    expect(bridged.value).toBe('updated')
-  })
-
-  it('updates the ref on user input events', () => {
-    const el = createInput('')
-    const bridged = useDomValueBridge(el)
-
-    // Simulate user typing by using the original descriptor to set value,
-    // then dispatching an input event
-    const proto = Object.getPrototypeOf(el)
-    const desc = Object.getOwnPropertyDescriptor(proto, 'value')
-    desc?.set?.call(el, 'typed')
-    el.dispatchEvent(new Event('input'))
-
-    expect(bridged.value).toBe('typed')
-  })
-
-  it('updates the DOM element when the ref is written to', async () => {
-    const el = createInput('initial')
-    const bridged = useDomValueBridge(el)
-
-    bridged.value = 'from-ref'
-    await nextTick()
-
-    expect(el.value).toBe('from-ref')
-  })
-
-  it('works with textarea elements', () => {
-    const el = createTextarea('initial')
-    const bridged = useDomValueBridge(el)
-
-    expect(bridged.value).toBe('initial')
-    el.value = 'new text'
-    expect(bridged.value).toBe('new text')
-  })
-
-  it('reads element value through the intercepted getter', async () => {
-    const el = createInput('start')
-    const bridged = useDomValueBridge(el)
-
-    // The getter on element.value should still work
-    expect(el.value).toBe('start')
-
-    bridged.value = 'changed'
-    await nextTick()
-    // The element getter should reflect the latest set
-    expect(el.value).toBe('changed')
-  })
-})

src/composables/element/useDomValueBridge.ts

@@ -1,79 +0,0 @@
-import { ref, watch } from 'vue'
-import type { Ref } from 'vue'
-
-type ValueElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-
-/**
- * Bridges a DOM element's `.value` property to a Vue reactive ref.
- *
- * This composable provides a clean, public API for extension authors to
- * synchronize DOM widget values with Vue reactivity (and by extension, the
- * `widgetValueStore`). It works by:
- *
- * 1. Intercepting programmatic `.value` writes via `Object.defineProperty`
- * 2. Listening for user-driven `input` events on the element
- * 3. Exposing a reactive `Ref<string>` that stays in sync with the DOM
- *
- * When the returned ref is written to, the DOM element's value is updated.
- * When the DOM element's value changes (programmatically or via user input),
- * the ref is updated.
- *
- * @param element - The DOM element to bridge (input, textarea, or select)
- * @returns A reactive ref that stays in sync with the element's value
- *
- * @example
- * ```ts
- * // In a custom widget's getValue/setValue:
- * const bridgedValue = useDomValueBridge(inputEl)
- * const widget = node.addDOMWidget(name, type, inputEl, {
- *   getValue: () => bridgedValue.value,
- *   setValue: (v) => { bridgedValue.value = v }
- * })
- * ```
- */
-export function useDomValueBridge(element: ValueElement): Ref<string> {
-  const bridgedValue = ref(element.value)
-
-  // Capture the original property descriptor so we can chain through it
-  const proto = Object.getPrototypeOf(element)
-  const originalDescriptor =
-    Object.getOwnPropertyDescriptor(element, 'value') ??
-    Object.getOwnPropertyDescriptor(proto, 'value')
-
-  // Intercept programmatic .value writes on the element
-  // This catches cases where extensions or libraries set element.value directly
-  try {
-    Object.defineProperty(element, 'value', {
-      get() {
-        return originalDescriptor?.get?.call(this) ?? bridgedValue.value
-      },
-      set(newValue: string) {
-        originalDescriptor?.set?.call(this, newValue)
-        bridgedValue.value = newValue
-      },
-      configurable: true,
-      enumerable: true
-    })
-  } catch {
-    // If the descriptor is non-configurable, fall back to polling-free sync
-    // via input events only
-  }
-
-  // Listen for user-driven input events
-  element.addEventListener('input', () => {
-    // Read through the original descriptor to avoid infinite loops
-    const currentValue = originalDescriptor?.get?.call(element) ?? element.value
-    bridgedValue.value = currentValue
-  })
-
-  // When the ref is written to externally, update the DOM element
-  watch(bridgedValue, (newValue) => {
-    const currentDomValue =
-      originalDescriptor?.get?.call(element) ?? element.value
-    if (currentDomValue !== newValue) {
-      originalDescriptor?.set?.call(element, newValue)
-    }
-  })
-
-  return bridgedValue
-}

src/scripts/changeTracker.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/litegraph'
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+
+import { ChangeTracker } from './changeTracker'
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: vi.fn(() => ({
+    activeWorkflow: null
+  })),
+  ComfyWorkflow: vi.fn()
+}))
+
+vi.mock('./api', () => ({
+  api: {
+    addEventListener: vi.fn(),
+    apiURL: vi.fn((path: string) => path)
+  }
+}))
+
+vi.mock('./app', () => ({
+  app: {
+    ui: { autoQueueEnabled: false, autoQueueMode: 'instant' },
+    canvas: { ds: { scale: 1, offset: [0, 0] } },
+    constructor: { maskeditor_is_opended: undefined }
+  },
+  ComfyApp: vi.fn()
+}))
+
+describe('ChangeTracker.init', () => {
+  it('forwards multiline argument to original prompt', () => {
+    const originalPrompt = vi.fn()
+    LGraphCanvas.prototype.prompt = originalPrompt
+
+    ChangeTracker.init()
+
+    const wrappedPrompt = LGraphCanvas.prototype.prompt
+    expect(wrappedPrompt).not.toBe(originalPrompt)
+
+    const mockCallback = vi.fn()
+    const mockEvent = {} as CanvasPointerEvent
+    const multilineValue = true
+
+    wrappedPrompt.call(
+      {} as LGraphCanvas,
+      'Title',
+      'value',
+      mockCallback,
+      mockEvent,
+      multilineValue
+    )
+
+    expect(originalPrompt).toHaveBeenCalledWith(
+      'Title',
+      'value',
+      expect.any(Function),
+      mockEvent,
+      true
+    )
+  })
+})

src/scripts/changeTracker.ts

@@ -307,14 +307,21 @@ export class ChangeTracker {
       title: string,
       value: string | number,
       callback: (v: string) => void,
-      event: CanvasPointerEvent
+      event: CanvasPointerEvent,
+      multiline?: boolean
     ) {
       const extendedCallback = (v: string) => {
         callback(v)
         checkState()
       }
       logger.debug('checkState on prompt')
-      return prompt.apply(this, [title, value, extendedCallback, event])
+      return prompt.apply(this, [
+        title,
+        value,
+        extendedCallback,
+        event,
+        multiline
+      ])
     }
 
     // Handle litegraph context menu for COMBO widgets

src/scripts/domWidget.ts

@@ -1,7 +1,6 @@
 import _ from 'es-toolkit/compat'
 import { type Component, toRaw } from 'vue'
 
-import { useDomValueBridge } from '@/composables/element/useDomValueBridge'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import {
   LGraphNode,
@@ -380,16 +379,6 @@ export const addWidget = <W extends BaseDOMWidget<object | string>>(
   })
 }
 
-function isValueElement(
-  el: HTMLElement
-): el is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
-  return (
-    el instanceof HTMLInputElement ||
-    el instanceof HTMLTextAreaElement ||
-    el instanceof HTMLSelectElement
-  )
-}
-
 LGraphNode.prototype.addDOMWidget = function <
   T extends HTMLElement,
   V extends object | string
@@ -400,19 +389,6 @@ LGraphNode.prototype.addDOMWidget = function <
   element: T,
   options: DOMWidgetOptions<V> = {}
 ): DOMWidget<T, V> {
-  // Auto-bridge value-bearing elements when no getValue/setValue provided.
-  // This gives extension authors automatic widgetValueStore integration.
-  if (!options.getValue && !options.setValue && isValueElement(element)) {
-    const bridgedValue = useDomValueBridge(element)
-    options = {
-      ...options,
-      getValue: (() => bridgedValue.value) as () => V,
-      setValue: ((v: V) => {
-        bridgedValue.value = String(v)
-      }) as (v: V) => void
-    }
-  }
-
   const widget = new DOMWidgetImpl({
     node: this,
     name,