Comfy-Org / Comfy-Org/ComfyUI_frontend

Migrate FormDropdown overlay from PrimeVue Popover to Reka UI Popover

Open
#13,308 1 comment 1 reaction 0 assignees View on GitHub
area:vue-migration area:widgets PrimeVue
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Problem / Goal

The Vue Nodes `FormDropdown` (and its sibling `FormDropdownMenuActions`) still use PrimeVue's `Popover` for overlay positioning. Per our guideline to avoid new PrimeVue usage and to stay consistent with existing Reka UI usage (ColorPicker, Popover.vue), these should migrate to Reka UI Popover primitives.

Note: the original dropdown Y-position bug under canvas zoom was already fixed by #11147 (removed the `appendTo` override). This is a **consistency refactor only**, not a bug fix.

## Proposed Solution

Replace the PrimeVue `Popover` with Reka UI Popover primitives (`PopoverRoot`, `PopoverAnchor`, `PopoverContent`, `PopoverPortal`). `PopoverPortal` teleports content to ``, keeping the overlay robust against canvas CSS-transform positioning issues and giving built-in escape/click-outside/focus management.

An earlier attempt (#11001) did this against the old monolithic `FormDropdown.vue`. That component has since been split into `FormDropdownInput`/`FormDropdownMenu`/`FormDropdownMenuActions`/`FormDropdownMenuFilter`/`FormDropdownMenuItem`, so the migration must be re-done against the current structure. #11001 is being closed in favor of this fresh task.

Scope:
- `src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue`
- `src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue`
- Any related overlay/popover usage in the `form/dropdown/` directory

## Acceptance Criteria

- [ ] FormDropdown overlay no longer imports/uses `primevue/popover`
- [ ] FormDropdownMenuActions overlays migrated to Reka UI Popover
- [ ] Dropdown opens/closes via trigger click, Escape, and click-outside
- [ ] Dropdown is correctly positioned near its trigger at default, zoomed-in, and zoomed-out canvas levels
- [ ] Unit tests updated/added for open/close/dismiss behavior; `pnpm typecheck`, `pnpm lint`, and relevant tests pass

Contributor guide

Open the contributing guide

Research direction

Start by reading the current overlay usage in src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue and FormDropdownMenuActions.vue, then inspect related usage in the form/dropdown/ directory. Confirm the overlays use Reka UI primitives, support trigger, Escape, and click-outside dismissal, remain correctly positioned at different canvas zoom levels, and update or add relevant unit tests before running pnpm typecheck, pnpm lint, and the relevant tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.