FormControlLabel的label属性使用：Autocomplete嵌套RadioGroup点击标签关闭下拉问题

Autocomplete 默认的下拉关闭逻辑会检测点击元素是否属于下拉选项区域，你点击的Radio单选按钮标签（span元素）没有透传Autocomplete renderOption 方法传入的索引标识属性，会被判定为点击了下拉框外部区域，直接触发关闭，同时也不会触发原生的选中赋值逻辑。

• 第一步：手动控制Autocomplete的下拉展开状态，过滤非必要的关闭触发逻辑
  先声明状态控制下拉显隐：

  const [open, setOpen] = useState(false);
  

  给Autocomplete组件增加显隐控制和关闭拦截：

  <Autocomplete
    open={open}
    onOpen={() => setOpen(true)}
    onClose={(event, reason) => {
      // 仅在主动选择选项、按ESC、点击输入框收起时才关闭下拉，过滤外部点击的关闭逻辑
      if(['selectOption', 'escape', 'toggleInput'].includes(reason)) {
        setOpen(false);
      }
    }}
    // 其余原有配置保持不变
  />
  

• 第二步：阻止RadioGroup区域的点击事件冒泡，避免误触Autocomplete的原生选中逻辑
  在renderOption方法中，给AccordionDetails或者RadioGroup的外层容器增加点击事件拦截，同时要把renderOption传入的props透传给最外层容器，避免选项识别异常：

  renderOption={(props, option) => (
    // 必须透传props，保留Autocomplete内置的选项标识属性
    <div {...props}>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          {option.groupName}
        </AccordionSummary>
        <!-- 点击AccordionDetails区域时阻止事件往上冒泡到选项容器 -->
        <AccordionDetails onClick={(e) => e.stopPropagation()}>
          <RadioGroup
            value={yourSelectedState}
            onChange={(e) => {
              // 手动更新你自己维护的单选选中状态
              setYourSelectedState(e.target.value);
              // 如果需要把选中值同步给Autocomplete，可手动调用setState更新Autocomplete的value
            }}
          >
            {/* 你的Radio单选项配置 */}
          </RadioGroup>
        </AccordionDetails>
      </Accordion>
    </div>
  )}
  

• 第三步：如果需要选中Radio后自动关闭下拉，可在RadioGroup的onChange回调末尾手动调用setOpen(false)即可。

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