Popover 只展示了一次

[zqjimlove]

Version information

• ChatUI
• ChatUI Version: 0.3.2
• React Version: laetst
• OS Version: Big Sur
• Browser Version: Chrome 90

Describe the bug

配置了Action和 wideBreakpoint 之后所有 action 改成了 Popover 的形式展示，但是点击第一次可以展示，之后就再也不能展示了。通过debug发现 useClickOutside 会在 didmout 之后也触发了。

实际上是有添加到body的，但是又立马被删除了。

Steps To Reproduce
1.
2.

Link to minimal reproduction

Expected behavior

[bacchusjaa]

我也遇到类似的问题 不过我的是表情组件第一次渲染之后可以弹出来 第二次点击就弹不出来了

[akai]

有 demo 吗？

[bacchusjaa]

有 demo 吗？
var bot = new ChatSDK({
config: {
navbar: {
title: '智能助理'
},
robot: {
avatar: '//gw.alicdn.com/tfs/TB1U7FBiAT2gK0jSZPcXXcKkpXa-108-108.jpg'
},
toolbar: [
{
type: 'image',
icon: 'image',
title: '相册',
},
{
type: 'emoji',
icon: 'smile',
title: '表情',
render:
<Picker
style={{ width: '100%' }}
key={Math.random()*100}
/>
},
],
messages: [
{
type: 'text',
content: {
text: '智能助理为您服务，请问有什么可以帮您？'
}
}
]
},
requests: {
send: function (msg) {
if (msg.type === 'text') {
return {
url: '//api.server.com/ask',
data: {
q: msg.content.text
}
};
}
}
}
});

bot.run();

在render表情的时候 只加载了一次

[akai]

在render表情的时候 只加载了一次

能放到类似 https://codesandbox.io/ 的地方看效果吗

[zqjimlove]

其实问题出在useClickOutside这个方法，当点击 Toolbar 的时候，Toolbar的click事件还在处理时（未冒泡到body）就添加了一个事件到body（调用栈在popover最开始），toolbar的click处理完后继续进行事件冒泡，冒泡到了body就触发刚才添加的click事件（即隐藏popover的处理）。

解决方案有两个，停止冒泡（但显然不合理，popover可能在别的地方也会用）。useClickOutside 添加事件时用set time out包裹，等 click 事件结束并进入下一个 eventloop 再添加事件。

[zqjimlove]

至于第一次为什么可以，估计是Popover还没被初始化，也对dom进行了一次处理使浏览器进入了重排，事件冒泡也停了？具体原因需要看composer的代码。

[akai]

我们的小蜜项目是没有这个问题的，我在研究一下吧有什么差异，可以临时用下面的代码解决，Pro 的话升级到 v0.2.2 ：

onToolbarClick={(item, e) => {
  // handleToolbarClick(item);
  e.stopPropagation();
}}

[akai]

v0.3.3 已修复