React中Dropdown绑定Tooltip后选项无法选中的问题排查

Material-UI 的 TextField select（底层基于 Select 组件）要求直接子元素必须是 MenuItem，组件会通过直接子元素的 value 属性识别选中项并同步状态。你把 MenuItem 包裹在 Tooltip 里后，TextField 无法直接识别到 MenuItem，导致选中后状态无法同步。

有两种可行的修复方式：

方式一：将 Tooltip 嵌套在 MenuItem 内部 #

让 MenuItem 成为 TextField 的直接子元素，把 Tooltip 放在 MenuItem 内部，既能保留提示功能，又能让组件正确识别选项：

<TextField
  select
  required
  label="Info"
  value={subTypeId}
  onChange={(event) => setsubTypeId(+event.target.value)}
  disabled={submission.loading}
  style={{ textAlign: "center" }}
>
  {submission.investigationTypeChoices.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      <Tooltip title={option.focus}>
        <span>{option.text}</span>
      </Tooltip>
    </MenuItem>
  ))}
</TextField>

方式二：让点击事件穿透 Tooltip #

给 Tooltip 设置 pointerEvents="none"，让点击事件穿透到下层的 MenuItem，同时给 MenuItem 恢复点击处理能力：

<TextField
  select
  required
  label="Info"
  value={subTypeId}
  onChange={(event) => setsubTypeId(+event.target.value)}
  disabled={submission.loading}
  style={{ textAlign: "center" }}
>
  {submission.investigationTypeChoices.map((option) => (
    <Tooltip title={option.focus} key={option.value} pointerEvents="none">
      <MenuItem 
        key={option.value} 
        value={option.value}
        style={{ pointerEvents: 'auto' }}
      >
        {option.text}
      </MenuItem>
    </Tooltip>
  ))}
</TextField>

两种方式都能解决选中后 TextField 不同步的问题，推荐第一种方式，更符合组件嵌套的逻辑规范。

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