在 mui（material ui）中，若将 tooltip 直接包裹 menuitem，会导致点击失效、选中状态无法更新；正确做法是将 tooltip 置于 menuitem 内部，并用 `
`（或其它可交互/渲染的 html 元素）包裹文本内容。
在使用 MUI 的 Select 组件时，为 MenuItem 添加 Tooltip 是一种常见需求——例如用于展示额外说明、字段含义或国际化提示。但若错误地将 Tooltip 作为 MenuItem 的父元素（如 <Tooltip><MenuItem>...</MenuItem></Tooltip>），会导致 MenuItem 失去原生点击事件绑定能力，从而无法触发 onChange 回调，选择项也无法更新。
根本原因在于：MUI 的 MenuItem 内部依赖原生 <li> 元素的事件冒泡与焦点行为，而 Tooltip（尤其是 describeChild={true} 或默认配置下）会接管其子元素的 onMouseEnter/onFocus 等事件，并可能干扰 MenuItem 的事件委托机制。此外，Tooltip 要求其直接子元素必须是有效的 React 节点且能承载 DOM 属性（如 title、aria-describedby），而 MenuItem 本身是一个复合组件，不支持被直接透传事件属性。
✅ 正确写法是将 Tooltip 嵌套在 MenuItem 内部，并确保其子元素为一个普通 HTML 元素（如 <div>、<span> 或 <p>），以保证事件穿透和无障碍支持：
<MenuItem value={10}>
<Tooltip title="Exactly twenty years old" placement="right">
<div>Twenty</div>
</Tooltip>
</MenuItem>⚠️ 注意事项：
- 不要省略 div（或类似容器）：<Tooltip><MenuItem>Text</MenuItem></Tooltip> ❌ 无效；<MenuItem><Tooltip><span>Text</span></Tooltip></MenuItem> ✅；
- 避免使用 describeChild={true} 在此场景——它仅适用于子元素本身不可交互的情况，而 MenuItem 是可交互的，应让 Tooltip 自动管理描述逻辑；
- 若需支持键盘导航（如 Tab / Arrow Keys），确保 div 不阻断 MenuItem 的 tabIndex 和焦点行为（MUI 默认已处理，故推荐用 <div> 而非自定义 tabIndex 元素）；
- 如需统一样式，可为 div 添加 sx={{ px: 1, py: 0.5 }} 保持内边距一致性。
? 小技巧：可封装为可复用组件提升可维护性：
const TooltipMenuItem = ({ value, label, tooltip }: {
value: any;
label: string;
tooltip: string;
}) => (
<MenuItem value={value}>
<Tooltip title={tooltip} arrow>
<div>{label}</div>
</Tooltip>
</MenuItem>
);
// 使用
<TooltipMenuItem value={10} label="Twenty" tooltip="Tewnty" />遵循该模式后，Select 的值更新、菜单关闭、键盘操作及无障碍支持（如屏幕阅读器读取 tooltip）均可正常工作。
