Ant Design 中 Radio.Group 与 TreeSelect 组合使用的焦点冲突问题解析

问题现象

在 Ant Design 5.24.2 版本中，当开发者将 Radio.Group 组件与 TreeSelect 组件组合使用时，会出现一个特殊的交互问题：当 TreeSelect 已经选择了一个值后，再次点击 TreeSelect 组件时，下拉面板会立即收起，无法正常展开进行二次选择。

问题根源分析

经过技术团队深入分析，发现这个问题源于 Radio 组件的 label 元素与 TreeSelect 组件之间的焦点抢占机制：

1. 在首次选择时，TreeSelect 的 input 触发器能够正常获得焦点，因此可以完成选择操作
2. 选择完成后，选择结果会覆盖在 input 元素上方
3. 当再次点击时，由于 label 元素的特性，它会捕获点击事件，导致 TreeSelect 无法获得焦点
4. 这种焦点抢占机制导致了下拉面板无法正常展开的异常行为

解决方案

Ant Design 技术团队提供了两种解决方案：

方案一：修改 Radio 的 label 元素（不推荐）

将 Radio 的 label 元素改为普通的 div 元素。这种方法虽然能解决问题，但会破坏 Radio 组件的标准结构和行为，可能带来其他副作用，因此不推荐使用。

方案二：使用隔离层（推荐）

在 Radio.Group 和 TreeSelect 之间添加一个隔离层 div 元素，并为其设置以下样式：

pointer-events: none;

这种方法通过创建一个"事件穿透"层，有效隔离了 Radio 和 TreeSelect 之间的焦点冲突，是目前最推荐的解决方案。

扩展问题与解决方案

在实际使用中，当 TreeSelect 启用 treeCheckable 多选模式时，还可能出现以下特殊情况：

1. 点击 TreeSelect 输入框不会触发 Radio.Group 的 onChange 事件（隔离层生效）
2. 但点击已选标签的关闭按钮时，却会触发 Radio.Group 的 onChange 事件（隔离层失效）

对于这种情况，技术团队建议将这类扩展问题作为新的 issue 提出，以便进行更专门的讨论和解决。

最佳实践建议

1. 当组合使用表单组件时，特别是像 Radio 和 TreeSelect 这样有复杂交互的组件，应当特别注意焦点管理
2. 使用隔离层是解决组件间交互冲突的有效手段
3. 对于复杂的交互场景，建议进行充分的测试，确保所有交互行为符合预期
4. 关注 Ant Design 的更新日志，这类交互问题可能会在后续版本中得到官方修复

通过理解这些组件交互的底层机制，开发者可以更好地构建稳定可靠的用户界面，避免类似的焦点冲突问题。