解决 shadui组件库Popover 点击后会消失

react用了shadui组件库

        <Popover>
          <PopoverTrigger>
            <div className="text-operation-item" onClick={props.callback}>
              <img src={props.imgSrc} width={20} height={20} />
            </div>
          </PopoverTrigger>
          <PopoverContent className="text-operation-bar">
          {props?.childComponent}
          </PopoverContent>
        </Popover>

原因

shadcn/ui 的 Popover 底层是基于 @radix-ui/react-popover，默认行为是：

PopoverContent 里的任何点击事件，如果冒泡到 document，就会触发 Popover 的自动关闭。

📌 为什么点 childComponent 会让 Popover 关闭？
因为 @radix-ui/react-popover 会监听 onPointerDownOutside / onInteractOutside 事件，判断如果点击不是在 PopoverTrigger 或 PopoverContent 里，就关闭 Popover。
如果你的 childComponent 内部点击事件没有 stopPropagation，或者它的 focusable 元素 blur 了，也会触发关闭

解决办法：

方法 1：
给 childComponent 里的元素加 onClick={(e) => e.stopPropagation()}

<input onClick={(e) => e.stopPropagation()} />

如果 childComponent 是个自定义组件，也要确保它内部点击事件 stop 了冒泡。

方法 2：
利用 Popover 的 onOpenChange 和 open 手动控制开关状态
如果希望 Popover 点里面的内容不消失，推荐受控写法：

const [open, setOpen] = useState(false);

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger>...</PopoverTrigger>
  <PopoverContent>
    <input onClick={(e) => e.stopPropagation()} />
  </PopoverContent>
</Popover>

这样你能完全控制 Popover 的开关逻辑。