DirectoryTree点击范围不是整行

[fpsqdb]

Reproduction link

https://github.com/ant-design/ant-design/discussions/50915

Steps to reproduce

点击任意一条数据行左侧空白部分

What is expected?

整行都可以点击

What is actually happening?

左侧空白部分点击无效

Environment	Info
antd	5.21.2
React	18.3.1
System	windows 11
Browser	chrome latest

[petercat-assistant[bot]]

您提到的问题是关于 Ant Design 的 DirectoryTree 组件在点击范围上不是整行的问题。根据您提供的信息，点击数据行左侧的空白部分无效，而您期望整行都可以点击。

这是一个常见的用户体验问题，通常可以通过调整 CSS 样式或组件的属性来解决。以下是一些可能的解决方案：

1. CSS 样式调整：

   • 您可以通过调整 CSS 样式来扩大点击区域。例如，设置 DirectoryTree 行的 width 为 100%，并确保 padding 和 margin 不会影响点击区域。

2. 组件属性调整：

   • 检查 DirectoryTree 的属性，确保没有设置限制点击区域的属性。
   • 确保 onClick 事件绑定在正确的元素上，并且事件没有被其他元素阻止。

3. 自定义渲染：

   • 如果默认的 DirectoryTree 行渲染无法满足需求，可以考虑使用自定义渲染函数，手动设置行的点击事件。

如果这些建议无法解决您的问题，可能需要查看具体的代码实现或等待官方的修复更新。

如需进一步协助，请在评论中描述您的问题并 @petercat-assistant 以开始与我对话。

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• react-m6kp8f (Open reproduction)

[github-actions[bot]]

Hello @fpsqdb. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @fpsqdb，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[Meowu]

我看了一下，这个问题需要修改 rc-tree 的 InternalTreeNode ，目前底层仅能点击 title 的节点，也就是组件 titleRender 渲染的部份。 经过测试，要支持这个的话，可以给最外层的元素添加事件，这样空白的 Indent 和 Switcher-noop 部份都支持点击，包括点击元素之间的空白部份也会触发选中。 如果仅支持 DirectoryTree 这样点击，还需要修改这里的样式，以及传递一个 prop 去启用最外层的选择事件。

[afc163]

@Meowu 4.x 是可以的，先看看哪次修改改坏了。

[Meowu]

@Meowu 4.x 是可以的，先看看哪次修改改坏了。

@afc163 我测了一下，从 4.x 开始就不可以了，3.x 都是可以的。

[afc163]

发现是 5 年前 @zombieJ 改造时改坏的，这里把 before 伪元素从内层 content-wrapper 节点移到外面了：https://github.com/ant-design/ant-design/pull/18172/files#diff-f27b9532d1fece5efa83797376f2bec755af1034a01fea65240e1307ade214b0R11-R21

但这个 before 伪元素不只是为了 hover 背景效果，也有交互响应的作用，挪出来之后交互没了。

五年了才被发现，给 @fpsqdb 点赞啊！

[fpsqdb]

既然是整行点击，感觉这个展开图标的hover效果可以去了，有点突兀

[Meowu]

发现是 5 年前 @zombieJ 改造时改坏的，这里把 before 伪元素从内层 content-wrapper 节点移到外面了：https://github.com/ant-design/ant-design/pull/18172/files#diff-f27b9532d1fece5efa83797376f2bec755af1034a01fea65240e1307ade214b0R11-R21

但这个 before 伪元素不只是为了 hover 背景效果，也有交互响应的作用，挪出来之后交互没了。

五年了才被发现，给 @fpsqdb 点赞啊！

是的，我昨天也发现了是这里导致的。但是还没有找到解决办法。 现在即便给 node-content-wrapper 加上 :before , 但因为它设置了 position: relative , 导致它的 :before 伪元素不好相对于外面的 tree-node 进行绝对定位从而占满整行。