[BUG] dcc.Dropdown: virtualized list keeps the height measured at opening when options grow while the menu is open

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

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

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

2026年11月9日 から。

評価

この issue はまだ評価されていません。

説明

bug P3 size: 1

Describe your context

dash                 4.5.0

Reproduced in headless Chromium (Playwright); first seen by our users on dash 4.4.1.

Describe the bug

A multi dcc.Dropdown whose options are updated by a callback while its menu is open keeps the list height it measured when the menu opened. If the menu opens while the options are few (here 1) and the callback then brings back many (here 300), the virtualized list stays one row tall (34 px) and the user has to scroll inside a single row. Closing and opening the menu again shows it at the normal height.

This happens with cascading filters: an item is chosen, the callback narrows the options to it, the user clears it with the × and opens the menu again before the callback has returned all the options.

The cause seems to be in OptionsList (components/dash-core-components/src/utils/optionRendering.tsx): the container is measured once, in a useLayoutEffect with an empty dependency array, and listHeight = Math.min(measuredHeight, options.length * defaultOptionHeight). With one option the measured height is one row, and it is never measured again when options grows.

Minimal example

import time
from dash import Dash, Input, Output, dcc, html

ALL = [f"item-{i:03d}" for i in range(300)]

app = Dash(__name__)
app.layout = html.Div(
    [dcc.Dropdown(id="dd", options=ALL, multi=True, placeholder="Pick an item")],
    style={"width": 400, "padding": 40},
)


@app.callback(Output("dd", "options"), Input("dd", "value"))
def narrow(value):
    # like a cascading filter: once an item is chosen only it is offered;
    # cleared, all 300 come back (the server takes a moment)
    time.sleep(0.5)
    return value if value else ALL


if __name__ == "__main__":
    app.run(port=8077, debug=False)

Steps:

  1. open the menu, pick item-007, close the menu (the options become ["item-007"]);
  2. click the × (Clear selection) and open the menu at once, before the callback returns;
  3. wait for the 300 options to come back.

Measured with Playwright on .dash-dropdown-content .dash-options-list-virtualized:

State list height content height
menu opened with 300 options 124 px 10494 px
step 3: menu opened with 1 option, 300 options back 34 px 10500 px
menu closed and opened again 124 px 10494 px

Expected behavior

The list height follows the options: when options changes while the menu is open, the list is measured again (for example the layout effect depending on options.length, or measuredHeight reset when the options change), so 300 options show at the normal height without closing and reopening the menu.

We work around it client-side by closing and reopening a menu whose virtualized list is shorter than three rows while its content is taller, which is what users did by hand.

Image Image
主要言語
Python
スター
24.5k
フォーク
2.3k
平均マージ
3日 7時間
マージ済み PR（30日）
30

環境構築

はじめの一歩

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

plotly/dash のほかの issue

plotly/dash の issue をすべて見る

似ている issue

Python の issue をもっと見る

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

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