使用dcc.Dropdown时选中值后下拉框自动关闭，如何保持展开状态？

dcc.Dropdown默认在多选模式下选中任意选项后会自动折叠下拉菜单，官方未提供原生配置项直接关闭该行为，可通过以下两种方案实现需求：

方案1：单组件独立控制（无额外依赖，推荐） #

通过dash客户端回调控制Dropdown的open属性，选中值后强制保持菜单展开状态

步骤1：修改Dropdown组件定义，新增open属性配置 #

dcc.Dropdown(
    id='job-type', 
    options=self.options, 
    placeholder='Select one or more Event(s)',
    value=self.job_type, 
    multi=True,
    # 新增控制下拉展开状态的属性，初始设为关闭
    open=False
)

步骤2：添加对应的客户端回调 #

from dash import Input, Output, State, clientside_callback

clientside_callback(
    """
    function(new_value, current_open_state) {
        // 仅在菜单原本处于展开状态时，选中值后保持展开
        return current_open_state ? true : window.dash_clientside.no_update;
    }
    """,
    Output('job-type', 'open'),
    Input('job-type', 'value'),
    State('job-type', 'open'),
    prevent_initial_call=True
)

注：该方案仅对当前ID的Dropdown生效，不会影响其他下拉组件的交互，且要求dash版本≥2.0，低版本需要先升级dash依赖。

方案2：全局生效配置 #

如果需要所有多选Dropdown都遵循选中后不折叠的交互，可通过注入自定义JS实现：
在项目的assets目录下新建custom_dropdown.js文件，写入以下代码：

document.addEventListener('click', (e) => {
    const targetOption = e.target.closest('.Select-option');
    const targetValue = e.target.closest('.Select-value-label');
    if (!targetOption && !targetValue) return;
    const multiSelect = e.target.closest('.Select.is-multi');
    if (multiSelect) {
        setTimeout(() => multiSelect.classList.add('is-open'), 10);
    }
})

注：该方案全局生效，不需要给每个Dropdown单独加回调，适合多下拉框的批量配置场景。

内容的提问来源于stack exchange，提问作者Harxish