Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#629 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@MihirSachdeva がすでに取り組んでいます。

2026年10月28日 から。

  • #630 @MihirSachdeva による — オープン

評価

難易度
1/5
見積もり時間
1〜3時間
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
react, typescript
領域
frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
TypeScript
スター
7.2k
フォーク
531
平均マージ
23時間 58分
マージ済み PR（30日）
51

環境構築

  • Dockerfile または Docker Compose ファイルあり
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

Openpanel-dev/openpanel のほかの issue

Openpanel-dev/openpanel の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。