Fluent UI Blazor 中 FluentListbox 组件在对话框中的异常处理分析

问题背景

在 Fluent UI Blazor 组件库的实际应用中，开发人员发现当 FluentListbox 组件被放置在 FluentDialog 对话框内时，如果用户按下 Escape 键试图关闭对话框，应用程序会抛出 System.ObjectDisposedException 异常，导致程序崩溃。

异常现象分析

当用户执行以下操作序列时会出现问题：

1. 将 FluentListbox 放置在 FluentDialog 对话框内
2. 使 FluentListbox 获得焦点
3. 按下 Escape 键

此时应用程序会抛出以下异常堆栈：

System.ObjectDisposedException: Cannot access a disposed object.
Object name: 'Microsoft.JSInterop.Implementation.JSObjectReference'.

技术原因剖析

经过深入分析，发现问题的根本原因在于组件生命周期管理和异步事件处理的时序问题：

1. 事件处理顺序：当 Escape 键被按下时，同时触发了 FluentDialog 和 FluentListbox 的键盘事件处理程序

2. 异步延迟问题：FluentListbox 的基类 ListComponentBase 中的 OnKeydownHandlerAsync 方法包含一个 1 毫秒的延迟（用于 WASM 环境下确保活动选项状态的正确更新）

3. 组件销毁时机：在异步延迟期间，FluentDialog 已经完成了关闭操作并销毁了相关资源

4. 资源访问冲突：当延迟结束后，事件处理程序尝试访问已被销毁的 JS 互操作对象引用(_jsModule)，导致 ObjectDisposedException

解决方案与最佳实践

临时解决方案

对于需要立即解决问题的开发者，可以采用以下临时方案：

<FluentKeyCode PreventDefaultOnly="true">
    <FluentListbox ... />
</FluentKeyCode>

这种方法通过 FluentKeyCode 组件阻止 Escape 键的默认行为（关闭对话框），仅处理按键事件本身。

根本解决方案建议

从组件设计角度，建议在 ListComponentBase 类中实施以下改进：

1. 资源销毁保护：在 Dispose 方法中将 _jsModule 显式设置为 null
2. 空引用检查：在使用 _jsModule 前添加 null 检查
3. 取消令牌机制：引入 CancellationToken 来取消异步操作当组件开始销毁时

环境适配说明

该问题在以下环境中被确认存在：

• 操作系统：Windows 11 Pro 24H2
• 浏览器：Google Chrome 133.0.6943.98
• 技术栈：.NET 8.0.404 配合 Fluent UI Blazor 4.11.4 版本
• 渲染模式：Blazor Web App 项目模板，使用 Interactive Server 渲染模式

开发者注意事项

对于使用 Fluent UI Blazor 组件的开发者，在处理对话框内可交互组件时，应当注意：

1. 组件生命周期：了解 Blazor 组件的生命周期，特别是 Dispose 时机的控制
2. 异步操作安全：确保异步操作中不会访问可能被销毁的资源
3. 键盘事件处理：对于可能触发多个组件响应的按键事件，考虑事件传播的顺序和影响

通过理解这些底层机制，开发者可以更好地构建健壮的 Blazor 应用程序，避免类似的资源访问冲突问题。