tdesign-vue-next
tdesign-vue-next copied to clipboard
[Table] 编辑状态下,错误监听外部点击事件,异常退出编辑状态
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,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。