当前位置：首页 > news >正文

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

news 来源：原创 2025/4/29 15:49:42

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>