selection点选框配合双击事件会导致同级其它元素中文本被全部选中

[tgzy520]

问题描述

selection下showNodeSelectionBox或showEdgeSelectionBox设置为true时，同时画布绑定双击事件graph.on('cell:dblclick')为打开antd下drawer组件（drawer挂载在当前位置，同时关闭时销毁该组件），此时drawer组件下所有元素中文本处于选中状态。

当drawer组件destroyOnClose={false}（关闭时不销毁该组件）时或forceRender={true}（预渲染）以及不挂载在container同级元素时不会出现该问题。

浏览器版本： 1.chorme浏览器在部分90以下版本时暂未发现该问题，90及以上部分版本存在该问题（103版本存在该问题）。 2.edge浏览器未发现该问题。

当前代码大致如下：

useEffect(() => { // 注册画布节点（边和点）鼠标双击事件 graph.on('cell:dblclick', ({ cell }) => { setVisible(true); }) }, [])

<div className={styles.content}> {/工具栏/} <div id="stencil" className={styles.slider} /> {/画布栏/} <div className={styles.panel}> {/画布与抽屉的容器/} <div id="drawer" className={styles.drawer}> {/画布容器/} <div id="container" className="x6-graph"/> {/流程图节点线数据/} <div><Drawer visible={visible} getContainer={false} destroyOnClose onClose={() => setVisible(false)} /></div> </div> </div> </div>

重现链接

无

重现步骤

1.graph绑定双击事件为打开antd下drawer组件； 2.drawer挂载当前dom位置； 3.双击cell，drawer组件内所有元素文本被选中；

预期行为

元素内文本不应被选中

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome v103]
• X6 版本: [1.32.11]

屏幕截图或视频（可选）

dom结构：

双击cell元素效果：

双击div选中框元素效果：

补充说明（可选）

9.9日更新： 今天再次排查了该问题，确认该问题是由showNodeSelectionBox添加的div元素导致drawer内容被选中。

步骤复现： 1.showNodeSelectionBox属性为true时，会创建一个类名为x6-widget-selection-box x6-widget-selection-box-node的div元素作为选中效果框。 2.将该元素框属性position由absolute改为static，此时选中框与cell位置分开，分别双击cell与div元素，cell元素双击弹出的drawer内容未被选中，而div元素双击弹出的drawer内容被全选。

进一步原因暂未排查出来，还需再次摸索。

[x6-bot[bot]]

👋 @tgzy520

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[NewByVector]

把 drawer 的 autoFocus=false 试试呢，因为我本地没有复现，猜想是时候打开 drawer 时，drawer 获得焦点，双击导致文本被选中。

[tgzy520]

试过了，还是不行，我这边再仔细研究一下看看是什么原因导致的吧，因为该问题也只是在部分版本的Chrome浏览器上才可以复现

[tgzy520]

9.9日更新： 今天再次排查了该问题，确认该问题是由showNodeSelectionBox添加的div元素导致drawer内容被选中。

步骤复现： 1.showNodeSelectionBox属性为true时，会创建一个类名为x6-widget-selection-box x6-widget-selection-box-node的div元素作为选中效果框。 2.将该元素框属性position由absolute改为static，此时选中框与cell位置分开，分别双击cell与div元素，cell元素双击弹出的drawer内容未被选中，而div元素双击弹出的drawer内容被全选。

进一步原因暂未排查出来，还需再次摸索。

dom结构：

双击cell元素效果：

双击div选中框元素效果：

[NewByVector]

本地尝试复现失败，issue 先关闭，如果能提供一个可以复现的 demo，请重新提一个 issue。

[KillenMr]

9.9日更新： 今天再次排查了该问题，确认该问题是由showNodeSelectionBox添加的div元素导致drawer内容被选中。

步骤复现： 1.showNodeSelectionBox属性为true时，会创建一个类名为x6-widget-selection-box x6-widget-selection-box-node的div元素作为选中效果框。 2.将该元素框属性position由absolute改为static，此时选中框与cell位置分开，分别双击cell与div元素，cell元素双击弹出的drawer内容未被选中，而div元素双击弹出的drawer内容被全选。

进一步原因暂未排查出来，还需再次摸索。

dom结构：

双击cell元素效果：

双击div选中框元素效果：

也出现了一样的问题，查到原因了吗

[HeZhiMr]

我这里也出现这个问题了，求解法

[HeZhiMr]

我这里也出现这个问题了，求解法

修改下面css，可以解决这个问题 .x6-widget-selection-box{ // pointer-events:none; //用这个会让选框效果出现问题 user-select: none; //用这个暂时一切正常 }

[duoluodexiaoxiaoyuan]

骤复现： 1.showNodeSelectionBox属性为true时，会创

我也遇到了一个问题，就是我修改了节点的值，但是drawer里面的值还是之前的，不知道是什么原因导致的