SPFx机器人扩展集成adaptivecards-fabric后卡片输入失效问题咨询

现象对应场景 #

SPFx机器人扩展结合Bot Framework集成Adaptive Cards时，使用adaptivecards-fabric@^1.1.1版本，关闭Fabric自定义控件时卡片功能正常，调用ACFabric.useFabricComponents()启用Fabric渲染后，所有输入域无法录入内容，这类问题的诱因既包含库版本本身的缺陷，也常出在集成实现的细节偏差上。

触发问题的常见原因 #

• 调用时序错误：adaptivecards-fabric的组件注入逻辑要求必须在Adaptive Card核心实例完成首次DOM渲染前完成绑定。如果在卡片执行render()方法之后才调用useFabricComponents()，Fabric组件在重写DOM输入元素的过程中会覆盖原有焦点事件监听，直接导致输入框无法响应键盘录入。
• 1.1.1版本的适配缺陷：该版本未针对SPFx宿主环境的DOM焦点隔离规则做兼容，Fabric渲染出的输入控件处于SPFx WebPart/Extension的容器层级内时，所有键盘输入事件会被上层容器拦截，无法传递到原生输入域。
• 集成遗漏配置：对照PnP官方SPFx集成示例实现时，未给卡片渲染容器关闭默认的输入事件捕获逻辑，进一步放大了事件拦截的问题。

可落地的修复步骤 #

• 调整代码执行顺序：严格遵循「先初始化Fabric组件绑定、再创建卡片实例、最后执行卡片渲染」的流程，正确的代码逻辑参考：

  import * as ACFabric from "adaptivecards-fabric";
  import { AdaptiveCard } from "adaptivecards";
  
  // 第一步：全局启用Fabric组件注入
  ACFabric.useFabricComponents();
  
  // 第二步：创建卡片实例并加载卡片Schema
  const card = new AdaptiveCard();
  card.parse(yourCardSchema);
  
  // 第三步：将卡片渲染到目标DOM容器
  card.render(this.cardContainer);
  

• 临时适配低版本：如果暂时无法升级依赖，可在卡片渲染完成后，手动遍历容器内的所有输入元素，放行被拦截的键盘事件，恢复输入能力。
• 长期版本修复：将adaptivecards-fabric依赖升级到1.3.0及以上版本，该版本已修复SPFx宿主环境下的焦点绑定冲突、事件拦截的已知问题，无需额外修改业务代码即可恢复所有输入域的正常能力。

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