Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Dashboard dropdown pickers re-render on every animation frame while open

Abierto
  • ¿Algo no está bien?
#629 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@MihirSachdeva ya está trabajando en esto.

Desde el 28/10/2026.

  • #630 de @MihirSachdeva — abierto

Evaluación

Dificultad
1/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

The affected pickers are in ui/combobox.tsx, ui/combobox-events.tsx, and ui/combobox-advanced.tsx; the dependency is pinned in apps/start/package.json. Read the reported rc-virtual-list height collection behavior and compare the pinned version with the upstream fix. Done means idle open pickers stop rendering every frame; an open pull request already tracks this work.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Describe the bug

While any searchable dropdown picker in the dashboard is open, its list re-renders on every animation frame, for as long as it stays open. Nothing has to change for this to happen: no hover, no scroll, no data loading. It stops when the popover closes and starts again the next time it opens.

It's invisible in normal use, but it keeps the main thread busy (a React commit plus a forced layout read per frame) the whole time someone is building a report or a filter.

Steps to reproduce
  1. Open React DevTools → Settings → enable Highlight updates when components render.
  2. Open any report and click the event picker in the sidebar (or the Criteria / Unit picker in a retention report, or a filter's value picker).
  3. Keep the mouse still.

The open list keeps flashing. The update counter on List, Filler and the item components climbs by ~60/s on a 60 Hz display (~120/s on a 120 Hz one), indefinitely.

Expected: the list renders when it opens, scrolls or its items change, and is idle otherwise.

Where it shows up

Every picker built on rc-virtual-list with cmdk items:

  • ui/combobox.tsx (Combobox): report criteria/unit, the funnel breakdown "From step" picker, Yes/No filter values, overview filters, plus pickers in notification rules, the webhook integration, tracking and organization settings, and onboarding
  • ui/combobox-events.tsx (ComboboxEvents): event pickers in report series, fixed events, filters, custom events, events stats, project event filters
  • ui/combobox-advanced.tsx (ComboboxAdvanced): filter values, cohort criteria builder, cohort filters, overview filter buttons, project access grants

PropertiesCombobox (the property/breakdown picker) also uses rc-virtual-list, but its items are motion.divs with a stable ref, and it doesn't loop.

Cause

It's two library behaviours feeding each other:

  1. rc-virtual-list 3.14.5: every time an item's ref is attached, useHeights calls collectHeight(), and that always does setUpdatedMark(c => c + 1) on the next frame, whether or not a height changed (hooks/useHeights.js).
  2. cmdk: Command.Item renders its <div> with ref={mergeRefs([ref, forwardedRef])}, which is a new callback ref on every render. React detaches and re-attaches it on every commit. cmdk 1.x does the same with composeRefs.

So each list render attaches a new ref, which schedules a height collection, which re-renders the list on the next frame. And so on.

This was fixed upstream in rc-virtual-list 3.17.1 (react-component/virtual-list#299, "fix: trigger only when changed"): the counter only moves when a measured height actually changes. apps/start/package.json still pins 3.14.5, unchanged since the virtual list was added in 01ed4acc.

Measurements

The dashboard's real Combobox / ComboboxAdvanced components, React 19.2.3, cmdk 0.2.1, production build, headless Chrome at 60 Hz. React commits counted with <Profiler> over 5 s with the popover open and idle:

Picker rc-virtual-list 3.14.5 rc-virtual-list 3.19.2
Combobox (3 items) 300 commits / 301 frames 0
ComboboxAdvanced (3 items) 300 / 301 0
Combobox (1,000 items, searchable) 301 / 301 1
Suggested fix

Bump rc-virtual-list to 3.17.1 or later (3.19.2 is the latest; avoid 3.17.0, which has the hang reported in ant-design/ant-design#52400). Its dependencies and the props the dashboard uses are unchanged. I'll open a PR.

Environment
  • OpenPanel main @ 6521604 (also seen on our self-hosted instance)
  • React 19.2.3, cmdk 0.2.1, rc-virtual-list 3.14.5
  • Chrome on macOS
Lenguaje dominante
TypeScript
Estrellas
7.2k
Forks
531
Merge medio
23 h 58 min
PR fusionados (30 d)
51

Preparar el entorno

  • Incluye un Dockerfile o un archivo de Docker Compose
  • Sin plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Openpanel-dev/openpanel

Todos los issues de Openpanel-dev/openpanel

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.