fix: flip teleported dropdown upward when near viewport bottom

Apply the same openUpward logic for both teleported and local cases.
When teleported, use bottom CSS property to open upward.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

browser_tests/fixtures/selectors.ts

@@ -65,7 +65,9 @@ export const TestIds = {
     decrement: 'decrement',
     increment: 'increment',
     domWidgetTextarea: 'dom-widget-textarea',
-    subgraphEnterButton: 'subgraph-enter-button'
+    subgraphEnterButton: 'subgraph-enter-button',
+    formDropdownMenu: 'form-dropdown-menu',
+    formDropdownTrigger: 'form-dropdown-trigger'
   },
   builder: {
     ioItem: 'builder-io-item',

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -4,6 +4,7 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 /**
  * Default workflow widget inputs as [nodeId, widgetName] tuples.
@@ -143,15 +144,12 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     const dropdownButton = imageRow.locator('button:has(> span)').first()
     await dropdownButton.click()
 
-    // The unstyled PrimeVue Popover renders with role="dialog".
-    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
-    const popover = comfyPage.page
-      .getByRole('dialog')
-      .filter({ has: comfyPage.page.getByRole('button', { name: 'All' }) })
+    const menu = comfyPage.page
+      .getByTestId(TestIds.widgets.formDropdownMenu)
       .first()
-    await expect(popover).toBeVisible({ timeout: 5000 })
+    await expect(menu).toBeVisible({ timeout: 5000 })
 
-    const isInViewport = await popover.evaluate((el) => {
+    const isInViewport = await menu.evaluate((el) => {
       const rect = el.getBoundingClientRect()
       return (
         rect.top >= 0 &&
@@ -162,7 +160,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     })
     expect(isInViewport).toBe(true)
 
-    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
+    const isClipped = await menu.evaluate(isClippedByAnyAncestor)
     expect(isClipped).toBe(false)
   })
 })

browser_tests/tests/vueNodes/widgets/load/formDropdownPosition.spec.ts

@@ -0,0 +1,116 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { TestIds } from '../../../../fixtures/selectors'
+
+test.describe(
+  'FormDropdown positioning in Vue nodes',
+  { tag: ['@widget', '@node'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test('dropdown menu appears directly below the trigger', async ({
+      comfyPage
+    }) => {
+      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
+      await expect(node).toBeVisible()
+
+      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
+      await trigger.first().click()
+
+      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
+      await expect(menu).toBeVisible({ timeout: 5000 })
+
+      const triggerBox = await trigger.first().boundingBox()
+      const menuBox = await menu.boundingBox()
+
+      expect(triggerBox).toBeTruthy()
+      expect(menuBox).toBeTruthy()
+
+      // Menu top should be near the trigger bottom (within 20px tolerance for padding)
+      expect(menuBox!.y).toBeGreaterThanOrEqual(
+        triggerBox!.y + triggerBox!.height - 5
+      )
+      expect(menuBox!.y).toBeLessThanOrEqual(
+        triggerBox!.y + triggerBox!.height + 20
+      )
+
+      // Menu left should be near the trigger left (within 10px tolerance)
+      expect(menuBox!.x).toBeGreaterThanOrEqual(triggerBox!.x - 10)
+      expect(menuBox!.x).toBeLessThanOrEqual(triggerBox!.x + 10)
+    })
+
+    test('dropdown menu appears correctly at different zoom levels', async ({
+      comfyPage
+    }) => {
+      for (const zoom of [0.75, 1.5]) {
+        // Set zoom via canvas
+        await comfyPage.page.evaluate((scale) => {
+          const canvas = window.app!.canvas
+          canvas.ds.scale = scale
+          canvas.setDirty(true, true)
+        }, zoom)
+        await comfyPage.nextFrame()
+
+        const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
+        await expect(node).toBeVisible()
+
+        const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
+        await trigger.first().click()
+
+        const menu = comfyPage.page.getByTestId(
+          TestIds.widgets.formDropdownMenu
+        )
+        await expect(menu).toBeVisible({ timeout: 5000 })
+
+        const triggerBox = await trigger.first().boundingBox()
+        const menuBox = await menu.boundingBox()
+
+        expect(triggerBox).toBeTruthy()
+        expect(menuBox).toBeTruthy()
+
+        // Menu top should still be near trigger bottom regardless of zoom
+        expect(menuBox!.y).toBeGreaterThanOrEqual(
+          triggerBox!.y + triggerBox!.height - 5
+        )
+        expect(menuBox!.y).toBeLessThanOrEqual(
+          triggerBox!.y + triggerBox!.height + 20 * zoom
+        )
+
+        // Close dropdown before next iteration
+        await comfyPage.page.keyboard.press('Escape')
+        await expect(menu).not.toBeVisible()
+      }
+    })
+
+    test('dropdown closes on outside click', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
+      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
+      await trigger.first().click()
+
+      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
+      await expect(menu).toBeVisible({ timeout: 5000 })
+
+      // Click outside the node
+      await comfyPage.page.mouse.click(10, 10)
+      await expect(menu).not.toBeVisible()
+    })
+
+    test('dropdown closes on Escape key', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
+      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
+      await trigger.first().click()
+
+      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
+      await expect(menu).toBeVisible({ timeout: 5000 })
+
+      await comfyPage.page.keyboard.press('Escape')
+      await expect(menu).not.toBeVisible()
+    })
+  }
+)

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts

@@ -41,11 +41,6 @@ const MockFormDropdownInput = {
     '<button class="mock-dropdown-trigger" @click="$emit(\'select-click\', $event)">Open</button>'
 }
 
-const MockPopover = {
-  name: 'Popover',
-  template: '<div><slot /></div>'
-}
-
 interface MountDropdownOptions {
   searcher?: (
     query: string,
@@ -65,13 +60,17 @@ function mountDropdown(
       plugins: [PrimeVue, i18n],
       stubs: {
         FormDropdownInput: MockFormDropdownInput,
-        Popover: MockPopover,
         FormDropdownMenu: MockFormDropdownMenu
       }
     }
   })
 }
 
+async function openDropdown(wrapper: ReturnType<typeof mountDropdown>) {
+  await wrapper.find('.mock-dropdown-trigger').trigger('click')
+  await flushPromises()
+}
+
 function getMenuItems(
   wrapper: ReturnType<typeof mountDropdown>
 ): FormDropdownItem[] {
@@ -87,7 +86,7 @@ describe('FormDropdown', () => {
         createItem('input-0', 'video1.mp4'),
         createItem('input-1', 'video2.mp4')
       ])
-      await flushPromises()
+      await openDropdown(wrapper)
 
       expect(getMenuItems(wrapper)).toHaveLength(2)
 
@@ -106,7 +105,7 @@ describe('FormDropdown', () => {
 
     it('updates when items change but IDs stay the same', async () => {
       const wrapper = mountDropdown([createItem('1', 'alpha')])
-      await flushPromises()
+      await openDropdown(wrapper)
 
       await wrapper.setProps({ items: [createItem('1', 'beta')] })
       await flushPromises()
@@ -116,7 +115,7 @@ describe('FormDropdown', () => {
 
     it('updates when switching between empty and non-empty items', async () => {
       const wrapper = mountDropdown([])
-      await flushPromises()
+      await openDropdown(wrapper)
 
       expect(getMenuItems(wrapper)).toHaveLength(0)
 
@@ -154,7 +153,10 @@ describe('FormDropdown', () => {
     await flushPromises()
 
     expect(searcher).not.toHaveBeenCalled()
-    expect(getMenuItems(wrapper).map((item) => item.id)).toEqual(['3', '4'])
+
+    await openDropdown(wrapper)
+
+    expect(searcher).toHaveBeenCalled()
   })
 
   it('runs filtering when dropdown opens', async () => {
@@ -169,8 +171,7 @@ describe('FormDropdown', () => {
     )
     await flushPromises()
 
-    await wrapper.find('.mock-dropdown-trigger').trigger('click')
-    await flushPromises()
+    await openDropdown(wrapper)
 
     expect(searcher).toHaveBeenCalled()
     expect(getMenuItems(wrapper).map((item) => item.id)).toEqual(['keep'])

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computedAsync, refDebounced } from '@vueuse/core'
-import Popover from 'primevue/popover'
-import { computed, ref, useTemplateRef } from 'vue'
+import { computedAsync, onClickOutside, refDebounced } from '@vueuse/core'
+import type { CSSProperties } from 'vue'
+import { computed, inject, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
+import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import type {
   FilterOption,
@@ -51,7 +52,6 @@ interface Props {
 }
 
 const { t } = useI18n()
-const overlayProps = useTransformCompatOverlayProps()
 
 const {
   placeholder,
@@ -95,8 +95,11 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
 const isOpen = defineModel<boolean>('isOpen', { default: false })
 
 const toastStore = useToastStore()
-const popoverRef = ref<InstanceType<typeof Popover>>()
 const triggerRef = useTemplateRef('triggerRef')
+const dropdownRef = useTemplateRef('dropdownRef')
+
+const injectedAppendTo = inject(OverlayAppendToKey, undefined)
+const shouldTeleport = computed(() => injectedAppendTo === 'body')
 
 const maxSelectable = computed(() => {
   if (multiple === true) return Infinity
@@ -142,18 +145,57 @@ function internalIsSelected(item: FormDropdownItem, index: number): boolean {
   return isSelected(selected.value, item, index)
 }
 
-const toggleDropdown = (event: Event) => {
+const MENU_HEIGHT = 640 + 8
+const openUpward = ref(false)
+const fixedPosition = ref({ top: 0, left: 0 })
+
+const teleportStyle = computed<CSSProperties | undefined>(() => {
+  if (!shouldTeleport.value) return undefined
+  const pos = fixedPosition.value
+  return openUpward.value
+    ? {
+        position: 'fixed',
+        left: `${pos.left}px`,
+        bottom: `${window.innerHeight - pos.top}px`,
+        paddingBottom: '0.5rem'
+      }
+    : {
+        position: 'fixed',
+        left: `${pos.left}px`,
+        top: `${pos.top}px`,
+        paddingTop: '0.5rem'
+      }
+})
+
+function toggleDropdown() {
   if (disabled) return
-  if (popoverRef.value && triggerRef.value) {
-    popoverRef.value.toggle?.(event, triggerRef.value)
-    isOpen.value = !isOpen.value
+  if (!isOpen.value && triggerRef.value) {
+    const rect = triggerRef.value.getBoundingClientRect()
+
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+    openUpward.value = spaceBelow < MENU_HEIGHT && spaceAbove > spaceBelow
+
+    if (shouldTeleport.value) {
+      const MENU_WIDTH = 412
+      fixedPosition.value = {
+        top: openUpward.value ? rect.top : rect.bottom,
+        left: Math.min(rect.right, window.innerWidth - MENU_WIDTH)
+      }
+    }
   }
+  isOpen.value = !isOpen.value
 }
 
-const closeDropdown = () => {
-  if (popoverRef.value) {
-    popoverRef.value.hide?.()
-    isOpen.value = false
+function closeDropdown() {
+  isOpen.value = false
+}
+
+onClickOutside(triggerRef, closeDropdown, { ignore: [dropdownRef] })
+
+function handleEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeDropdown()
   }
 }
 
@@ -192,7 +234,7 @@ function handleSelection(item: FormDropdownItem, index: number) {
 </script>
 
 <template>
-  <div ref="triggerRef">
+  <div ref="triggerRef" class="relative" @keydown="handleEscape">
     <FormDropdownInput
       :files
       :is-open
@@ -207,42 +249,41 @@ function handleSelection(item: FormDropdownItem, index: number) {
       @select-click="toggleDropdown"
       @file-change="handleFileChange"
     />
-    <Popover
-      ref="popoverRef"
-      :dismissable="true"
-      :close-on-escape="true"
-      :append-to="overlayProps.appendTo"
-      unstyled
-      :pt="{
-        root: {
-          class: 'absolute z-50'
-        },
-        content: {
-          class: ['bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg']
-        }
-      }"
-      @hide="isOpen = false"
-    >
-      <FormDropdownMenu
-        v-model:filter-selected="filterSelected"
-        v-model:layout-mode="layoutMode"
-        v-model:sort-selected="sortSelected"
-        v-model:search-query="searchQuery"
-        v-model:ownership-selected="ownershipSelected"
-        v-model:base-model-selected="baseModelSelected"
-        :filter-options
-        :sort-options
-        :show-ownership-filter
-        :ownership-options
-        :show-base-model-filter
-        :base-model-options
-        :disabled
-        :items="sortedItems"
-        :is-selected="internalIsSelected"
-        :max-selectable
-        @close="closeDropdown"
-        @item-click="handleSelection"
-      />
-    </Popover>
+    <Teleport to="body" :disabled="!shouldTeleport">
+      <div
+        v-if="isOpen"
+        ref="dropdownRef"
+        :class="
+          cn(
+            'z-50 rounded-lg border-none bg-transparent p-0 shadow-lg',
+            !shouldTeleport && 'absolute left-0',
+            !shouldTeleport &&
+              (openUpward ? 'bottom-full pb-2' : 'top-full pt-2')
+          )
+        "
+        :style="teleportStyle"
+      >
+        <FormDropdownMenu
+          v-model:filter-selected="filterSelected"
+          v-model:layout-mode="layoutMode"
+          v-model:sort-selected="sortSelected"
+          v-model:search-query="searchQuery"
+          v-model:ownership-selected="ownershipSelected"
+          v-model:base-model-selected="baseModelSelected"
+          :filter-options
+          :sort-options
+          :show-ownership-filter
+          :ownership-options
+          :show-base-model-filter
+          :base-model-options
+          :disabled
+          :items="sortedItems"
+          :is-selected="internalIsSelected"
+          :max-selectable
+          @close="closeDropdown"
+          @item-click="handleSelection"
+        />
+      </div>
+    </Teleport>
   </div>
 </template>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -61,6 +61,7 @@ const theButtonStyle = computed(() =>
     "
   >
     <button
+      data-testid="form-dropdown-trigger"
       :class="
         cn(
           theButtonStyle,

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -97,6 +97,7 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
 
 <template>
   <div
+    data-testid="form-dropdown-menu"
     class="flex h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline -outline-offset-1 outline-node-component-border"
   >
     <FormDropdownMenuFilter