Fluent UI Popover点击外部无法关闭问题求助

你的问题出在受控模式下未处理关闭回调：因为你手动绑定了open={isFailurePopoverOpen}，Popover不会自动修改这个状态，必须通过onDismiss事件手动更新状态值。

按以下步骤修改代码即可解决：

1. 给Popover组件添加onDismiss属性，在回调中将控制弹窗显示的状态设为false
2. 保留PopoverTrigger，它是Popover交互逻辑的核心，移除后会导致点击外部关闭等功能失效

修改后的代码示例：

// 假设你用useState管理弹窗状态
const [isFailurePopoverOpen, setIsFailurePopoverOpen] = useState(false);

// ...

<Popover 
  open={isFailurePopoverOpen} 
  positioning="below" 
  trapFocus
  onDismiss={() => setIsFailurePopoverOpen(false)} // 新增关闭回调
>
  <PopoverTrigger>
    <Button onClick={() => setIsFailurePopoverOpen(!isFailurePopoverOpen)}>abc</Button>
  </PopoverTrigger>
  <PopoverSurface style={{ padding: "0px" }}>
    <FailurePopupContent />
  </PopoverSurface>
</Popover>

额外注意事项：

• 确认使用的是最新版@fluentui/react-components，旧版本Popover的API可能存在差异
• 如果FailurePopupContent内部有自定义关闭按钮，也要确保它能正确调用setIsFailurePopoverOpen(false)来更新状态

内容的提问来源于stack exchange，提问作者Saurav Likhar