Try to scroll the Vue node widget options, but it seems to conflict with the canvas zoom in/out.

[comfyui-wiki]

Screen.Recording.2025-09-20.at.14.01.39.mov

┆Issue is synchronized with this Notion page by Unito

[christian-byrne]

Background/Context

ComfyUI has implemented a sophisticated wheel event handling system to manage interactions between Vue widgets and the underlying LiteGraph canvas. Following recent improvements from PR #5445 and issue #4568, most UI components now properly forward wheel events to the canvas. However, widget dropdown overlays appear to have a gap in this event forwarding mechanism.

Problem Statement

Current Behavior:

• ✅ Main Vue node containers forward wheel events to canvas via canvasInteractions.handleWheel
• ✅ UI components (GraphCanvasMenu, SelectionToolbox) forward wheel events to canvas
• ❌ Wheel events over open dropdown menus trigger canvas zoom instead of scrolling dropdown content

Technical Root Cause Analysis

Current Wheel Event Architecture:

Working Components (implement proper forwarding):

// LGraphNode.vue - Main Vue node container
const { handleWheel } = useCanvasInteractions()
<div @wheel="handleWheel">

// GraphCanvasMenu.vue, SelectionToolbox.vue
<Component @wheel="canvasInteractions.handleWheel">

Missing Implementation (widget dropdown overlays):

File: src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue

• Current: Uses PrimeVue Select with appendTo: "self" overlay
• Missing: No explicit wheel event handler on overlay elements
• Problem: PrimeVue overlays capture wheel events by default

File: src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue

• Same issue: Missing wheel event forwarding in dropdown overlay

Canvas Interaction Logic (useCanvasInteractions.ts):

const handleWheel = (event: WheelEvent) => {
  // Standard mode: forward Ctrl+wheel for zoom
  if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
    forwardEventToCanvas(event)
    return
  }
  
  // Legacy mode: forward all wheel events
  if (\!isStandardNavMode.value) {
    forwardEventToCanvas(event)
    return
  }
  
  // Otherwise let component handle normally
}

Steps to Reproduce

1. Enable Vue node rendering (area:vue-migration)
2. Add a node with Select/dropdown widget (e.g., ComboBox widget)
3. Click dropdown to open options list
4. Scroll mouse wheel over the open dropdown menu
5. Observe: Canvas zooms/pans instead of dropdown scrolling
6. Expected: Dropdown should scroll, canvas should not move

Proposed Solution

Primary Fix: Add wheel event forwarding to widget dropdown overlays

<\!-- WidgetSelect.vue / WidgetMultiSelect.vue -->
<template>
  <Select
    v-model="localValue"
    :options="options"
    @wheel="handleDropdownWheel"
    :pt="{
      panel: {
        onWheel: handleDropdownWheel
      }
    }"
  />
</template>

<script setup>
import { useCanvasInteractions } from @/renderer/core/canvas/useCanvasInteractions

const { handleWheel: forwardWheelToCanvas } = useCanvasInteractions()

const handleDropdownWheel = (event: WheelEvent) => {
  const dropdown = event.target as HTMLElement
  const canScrollVertically = dropdown.scrollHeight > dropdown.clientHeight
  
  // If dropdown can scroll and we are scrolling normally, let it handle
  if (canScrollVertically && \!event.ctrlKey && \!event.metaKey) {
    return // Let dropdown scroll naturally
  }
  
  // Otherwise forward to canvas (for zoom in standard mode, or all events in legacy mode)
  forwardWheelToCanvas(event)
}
</script>

Alternative Approach: Use PrimeVue passthrough props to add wheel handling

const overlayProps = computed(() => ({
  appendTo: self,
  pt: {
    panel: {
      onWheel: (event: WheelEvent) => {
        // Check if panel content can scroll
        const panel = event.currentTarget as HTMLElement
        const hasVerticalScroll = panel.scrollHeight > panel.clientHeight
        
        if (\!hasVerticalScroll || event.ctrlKey || event.metaKey) {
          canvasInteractions.handleWheel(event)
        }
      }
    }
  }
}))

Implementation Checklist

Code Changes:

• Add wheel event handlers to WidgetSelect.vue
• Add wheel event handlers to WidgetMultiSelect.vue
• Add wheel event handlers to WidgetTreeSelect.vue
• Test dropdown scrolling behavior
• Test canvas interaction forwarding (both standard and legacy modes)

Testing Requirements:

• Test dropdown scrolling when content exceeds container height
• Test Ctrl+wheel forwarding to canvas for zoom in standard mode
• Test all wheel events forwarding to canvas in legacy mode
• Test edge case: empty dropdowns, single-item dropdowns
• Test different navigation mode settings

Edge Cases:

• Dropdowns with no scrollable content
• Nested dropdowns/overlays
• Touch/trackpad gesture handling
• Different PrimeVue overlay configurations

Related Issues & Context

• Root Cause Fix: PR #5445 - Fixed Vue node wheel forwarding
• Similar Issue: #4568 - Canvas menu/toolbox wheel capture
• Canvas Settings: PR #5566 - Canvas navigation mode controls
• Related UX: #3990 - Widget scroll vs canvas scroll

Key Files & Locations

• Primary fixes:
  • src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
  • src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
  • src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
• Canvas interactions: src/renderer/core/canvas/useCanvasInteractions.ts
• Working examples: src/components/graph/GraphCanvasMenu.vue, SelectionToolbox.vue
• Transform overlays: src/renderer/extensions/vueNodes/widgets/composables/useTransformCompatOverlayProps.ts