fix(ui): make autocomplete text widget scrollable in Nodes 2.0 mode

In Vue/Node 2.0 mode, the AutocompleteTextWidget's textarea wheel events were intercepted by TransformPane @wheel.capture before reaching the @wheel handler, causing canvas zoom instead of text scrolling.

- Add lm-wheel-scrollable class in Vue mode to hook into the window capture-phase handler (enableListWheelScroll) which scrolls the textarea manually before TransformPane can react.
- Add maxHeight prop and container max-height for Lora Loader/Stacker/WanVideo nodes (modelType === 'loras'), matching canvas mode's height cap. Prompt/Text nodes remain uncapped.
This commit is contained in:
Will Miao
2026-06-06 08:12:09 +08:00
parent d9ee9b3155
commit dd5b213adc
4 changed files with 36 additions and 20 deletions

View File

@@ -5,7 +5,8 @@
ref="textareaRef"
:placeholder="placeholder"
:spellcheck="spellcheck ?? false"
:class="['text-input', { 'vue-dom-mode': isVueDomMode }]"
:class="['text-input', { 'vue-dom-mode': isVueDomMode, 'lm-wheel-scrollable': isVueDomMode }]"
:style="maxHeight && isVueDomMode ? { maxHeight: maxHeight + 'px' } : undefined"
@input="onInput"
@wheel="onWheel"
/>
@@ -47,6 +48,7 @@ const props = defineProps<{
placeholder?: string
showPreview?: boolean
spellcheck?: boolean
maxHeight?: number
}>()
// Reactive ref for Vue DOM mode

View File

@@ -655,13 +655,16 @@ function createAutocompleteTextWidgetFactory(
// Get spellcheck setting from ComfyUI settings (default: false)
const spellcheck = app.ui?.settings?.getSettingValue?.('Comfy.TextareaWidget.Spellcheck') ?? false
const maxHeight = modelType === 'loras' ? AUTOCOMPLETE_TEXT_WIDGET_MAX_HEIGHT : undefined
const vueApp = createApp(AutocompleteTextWidget, {
widget,
node,
modelType,
placeholder: inputOptions.placeholder || widgetName,
showPreview: true,
spellcheck
spellcheck,
maxHeight
})
vueApp.use(PrimeVue, {
@@ -673,6 +676,10 @@ function createAutocompleteTextWidgetFactory(
const appKey = instanceId
vueApps.set(appKey, vueApp)
if (maxHeight) {
container.style.maxHeight = `${maxHeight}px`
}
widget.onRemove = createVueWidgetCleanup(vueApp, () => {
vueApps.delete(appKey)
})