Comfy-Org / Comfy-Org/ComfyUI_frontend
Migrate FormDropdown overlay from PrimeVue Popover to Reka UI Popover
- 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
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