Python Dash下拉框返回None后自动展开，如何实现临时关闭？

根因 #

你现有逻辑中，点击模态框关闭按钮时会触发两个回调：一是修改模态框的展开状态，二是将inspection_dropdown的value重置为None。dcc.Dropdown在value发生更新触发重渲染时，默认会自动展开下拉选项列表，就是这个逻辑导致你遇到的问题。

解决方案 #

方案1：通过open属性直接控制（推荐，适配Dash 2.7及以上版本） #

新版Dash的dcc.Dropdown提供了open属性，支持显式控制下拉列表的展开/收起状态，仅需新增一个回调，在点击关闭按钮时强制收起下拉框即可，不会影响后续下拉框的正常使用：

# 新增回调注册
def controlDropdownOpenCallback(self, app):
    app.callback(
        Output("inspection_dropdown", "open"),
        Input("close", "n_clicks"),
        prevent_initial_call=True
    )(self.closeDropdown)

# 回调实现
def closeDropdown(self, n):
    return False

方案2：客户端回调方案（兼容低版本Dash） #

如果你使用的Dash版本低于2.7，没有提供open属性，可以通过前端JS回调让下拉框失焦，实现自动收起：

# 直接注册客户端回调即可，无需额外服务端函数
app.clientside_callback(
    """
    function(n_clicks) {
        const dropdownEle = document.getElementById('inspection_dropdown');
        if (dropdownEle) dropdownEle.blur();
        return window.dash_clientside.no_update;
    }
    """,
    Output("inspection_dropdown", "value"),
    Input("close", "n_clicks"),
    prevent_initial_call=True
)

可选优化 #

如果你的业务逻辑不需要在关闭模态框时清空下拉框的选中值，直接移除clearDropdownCallback回调即可，下拉框value不会更新也就不会触发重渲染，自然不会自动展开选项列表。

内容的提问来源于stack exchange，提问作者Balázs Patai