Dash框架输入框禁用恢复后失焦及处理中输入失焦问题排查与解决求助

咱们先来拆解下当前问题的核心：当输入框处于禁用状态时，浏览器会自动移除该元素的焦点——哪怕你在处理过程中尝试输入（虽然禁用的输入框本不应接收输入，但debounce机制或浏览器默认行为可能触发意外的焦点丢失）。

要彻底解决这个问题，我们可以从「提前保存焦点状态」和「强化禁用时的焦点锁定」两个方向优化，下面是完整的解决方案代码：

from dash import Dash, html, callback, Output, Input, dcc
from time import sleep
import dash_bootstrap_components as dbc

input_tag = dbc.Input(id='input', debounce=500, autoFocus=True)
output_tag = dbc.Input(id='output', disabled=True)

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = [
    html.Div(
        [input_tag, dcc.Loading(children=html.Div(id='spinner_div'), type='circle')],
        style={'width': 'fit-content'}
    ),
    html.Div([output_tag]),
]

# 客户端回调：处理焦点保存与恢复逻辑
app.clientside_callback(
    """
    function(disabled) {
        const el = document.getElementById('input');
        if (!el) return window.dash_clientside.no_update;
        
        // 当输入框从禁用转为可用时，重新聚焦并定位光标到末尾
        if (disabled === false) {
            el.focus();
            el.setSelectionRange(el.value.length, el.value.length);
        }
        // 当输入框即将被禁用时，记录当前焦点状态
        else if (document.activeElement === el) {
            window.lastFocusedInput = 'input';
        }
        return window.dash_clientside.no_update;
    }
    """,
    Input('input', 'disabled')
)

# 主处理回调：强化禁用时的焦点锁定
@callback(
    Output('spinner_div', 'children'),
    Output('output', 'value'),
    Input('input', 'value'),
    prevent_initial_call=True,
    running=[
        (Output('input', 'disabled'), True, False),
        # 处理时将输入框设为不可通过Tab/点击获取焦点，完成后恢复
        (Output('input', 'tabIndex'), -1, 0)
    ]
)
def process(value: str):
    sleep(1)
    return '', value

if __name__ == '__main__':
    app.run(debug=True)

关键优化点说明： #

• 焦点状态留存：在输入框被禁用前，检查它是否为当前焦点元素，如果是则标记下来，确保恢复时能精准定位焦点。
• TabIndex控制：处理过程中将输入框的tabIndex设为-1，阻止用户通过Tab键或点击操作切换焦点到其他元素，处理完成后恢复默认可聚焦状态。
• 光标体验优化：恢复焦点时自动将光标移动到输入内容末尾，符合用户连续输入的使用习惯。

另外建议保持debounce时间与处理时间匹配，避免短时间内重复触发回调导致的状态混乱。

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