React MUI Select组件嵌套Tooltip后点击MenuItem无法选中

问题核心：当用Tooltip直接包裹MenuItem作为Select的子元素时，Tooltip会成为Select的直接子节点，而Select仅识别直接子级的MenuItem组件，点击事件被Tooltip拦截，导致Select无法触发onChange更新选中值。

解决方案：将Tooltip嵌套在MenuItem内部 #

把Tooltip放到MenuItem里面，让MenuItem保持作为Select的直接子元素，这样既保留Tooltip功能，又不影响Select的事件触发逻辑。

修改后的代码：

return(
 <FormControl sx={{ m: 1, minWidth: 80 }}>
        <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-autowidth-label"
          id="demo-simple-select-autowidth"
          value={age}
          onChange={handleChange}
          autoWidth
          label="Age"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>
            <Tooltip title="Twenty">
              Twenty
            </Tooltip>
          </MenuItem>
          <MenuItem value={21}>Twenty one</MenuItem>
          <MenuItem value={22}>Twenty one and a half</MenuItem>
        </Select>
      </FormControl>
)

原理说明 #

Select组件内部会监听直接子元素MenuItem的交互事件，当Tooltip作为外层容器时，破坏了这种直接的层级关联，导致Select无法正确捕获选择动作。将Tooltip嵌套进MenuItem后，MenuItem依然是Select的直接子级，点击事件能正常传递给Select的onChange回调，同时Tooltip的悬浮提示功能不受影响。

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