Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#629 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@MihirSachdeva ci sta già lavorando.

Dal 28/10/2026.

  • #630 di @MihirSachdeva — aperta

Valutazione

Difficoltà
1/5
Tempo stimato
1-3 ore
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
7.2k
Fork
531
Merge medio
23h 58m
PR unite (30g)
51

Preparare l'ambiente

  • Include un Dockerfile o un file Docker Compose
  • Nessun modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Openpanel-dev/openpanel

Tutte le issue di Openpanel-dev/openpanel

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.