Chakra-UI中RadioGroup嵌套Select组件时下拉选择失效问题求助

• Chakra UI 的 <Radio> 组件默认根节点为 <label> 标签，当 <Select> 嵌套在 <Radio> 内部时，Select的点击、选择事件会触发label的默认行为，自动激活关联的单选框输入，同时事件冒泡到上层 <RadioGroup> 的事件监听逻辑，被RadioGroup判定为单选框的选中操作，进而拦截覆盖了Select本身的选择事件，导致选择无响应。
• Select单独使用时不存在外层Radio/RadioGroup的事件拦截，因此功能正常。

方案1（推荐）：调整DOM结构，将Select与Radio平级排列 #

不要把Select作为<Radio>的子元素，将二者放在同一个布局容器内平级排布，从根源避免label标签的默认行为干扰，结构示例：

<RadioGroup value={selectedRadio}>
  <VStack align="start" gap={4}>
    {/* 单个选项单元 */}
    <HStack gap={2}>
      <Radio value="option1">选项1</Radio>
      {selectedRadio === "option1" && <Select w={200} placeholder="选择子项" />}
    </HStack>
    <HStack gap={2}>
      <Radio value="option2">选项2</Radio>
      {selectedRadio === "option2" && <Select w={200} placeholder="选择子项" />}
    </HStack>
  </VStack>
</RadioGroup>

方案2：阻止Select事件冒泡 #

如果业务需要必须将Select嵌套在Radio内部，给Select的外层容器添加事件阻止逻辑，避免事件向上传递到Radio和RadioGroup：

<Radio value="option1">
  选项1
  {selectedRadio === "option1" && (
    <div onClick={e => e.stopPropagation()} onChange={e => e.stopPropagation()}>
      <Select w={200} placeholder="选择子项" />
    </div>
  )}
</Radio>

内容的提问来源于stack exchange，提问作者daydreamer