tdesign-vue-next icon indicating copy to clipboard operation
tdesign-vue-next copied to clipboard

[Table] 编辑状态下,错误监听外部点击事件,异常退出编辑状态

Open Cat1007 opened this issue 11 months ago • 1 comments

tdesign-vue-next 版本

1.9.0

重现链接

https://tdesign.tencent.com/vue-next/components/table#%E5%8F%AF%E7%BC%96%E8%BE%91%E5%8D%95%E5%85%83%E6%A0%BC%E7%9A%84%E8%A1%A8%E6%A0%BC

重现步骤

输入文本后,点击拖动选择文本,鼠标移动到表格外松开鼠标,click 时间触发于 document,导致错误判断为点击了外部,编辑状态异常取消

期望结果

对于 mousedown 发生于编辑元素内部的 click 事件,不触发退出编辑状态的行为

实际结果

问题一:

https://github.com/Tencent/tdesign-vue-next/blob/9f3f3e7920f3fddee39d4cbb4a0886339fcb3a0c/src/table/editable-cell.tsx#L354-L367

该段代码中,直接通过 click 事件判断,然后当 mousedown 和 mouseup 触发在不同元素的时候,常见于文本拖动选择场景,click会触发在 document 中,导致异常退出编辑态。

参考 vueuse 中 clickOutside 的实践,需要合理过滤 mousedown 位于当前元素的事件 https://github.com/vueuse/vueuse/blob/7966b85d6f21dc2219b4c4371c8d905b3b1a9488/packages/core/onClickOutside/index.ts#L90-L94

通过一个 flag,过滤掉 mousedown 触发在编辑元素内的 click 事件

问题二:

假设问题一被正确修复,但是当表格中存在多个编辑态的 cell 的时候,对于 mouseup 触发在外部的场景,依旧会导致除了当前操作的 cell 外,别的 cell 均退出编辑态。似乎保留其余 cell 的编辑态会更合理,所以记录 mousedown 的 flag 可能会需要维护在父组件中共享在各个 cell 中间

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

Cat1007 avatar Mar 18 '24 08:03 Cat1007

👋 @Cat1007,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Mar 18 '24 08:03 github-actions[bot]