Blazor OnAfterRenderAsync调用FocusAsync意外触发按钮点击事件

问题原因 #

该问题由两个因素共同导致：

• 代码未判断OnAfterRenderAsync的firstRender参数，组件每一次重渲染都会重复执行聚焦逻辑
• 浏览器在DOM刚完成渲染的同步执行上下文中，会将程序化触发的按钮焦点识别为用户激活操作，直接触发按钮绑定的点击事件，该问题在Chromium内核浏览器中复现概率极高。

修复步骤 #

• 给聚焦逻辑加firstRender判断，仅在弹窗首次渲染时执行聚焦，避免重复触发
• 增加极短的异步延迟，错开DOM渲染和焦点调用的执行时序，绕开浏览器的事件误判逻辑，延迟控制在100ms以内时用户完全感知不到等待。

修正后的DialogComponent核心代码 #

<button type="button" class="btn btn-danger" @ref="YNnoButton"
             @onclick="No">No</button>

@code {
    ElementReference YNnoButton;
    [Parameter] public EventCallback<DialogResult> OnCancel { get; set; }

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 30-100ms延迟均可，优先选50ms兼顾稳定性和体验
            await Task.Delay(50);
            await SetFocus();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async Task SetFocus()
    {
        await YNnoButton.FocusAsync();
    }

    private Task No()
    {
        return OnCancel.InvokeAsync(DialogResult.No);
    }
}

额外注意事项 #

• 如果你的弹窗组件是常驻复用的（打开关闭不销毁组件实例），不要仅用firstRender判断聚焦时机，可以新增一个弹窗打开状态的参数，在参数切换为打开状态时再执行聚焦逻辑
• 不要用JS原生focus()方法替换Blazor内置的FocusAsync，在Blazor多种交互模式混合、SSR嵌套的场景下，原生JS方法会出现焦点随机丢失的兼容性问题
• 不需要给按钮加preventDefault之类的事件拦截，这类方案会导致正常的鼠标、键盘点击失效。

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