重复问题
- 我搜索了现有的问题
最新版本
- 我测试了最新版本
重现步骤 🕹
链接到实时示例:
步骤:
当前行为 😯
我有一个带有嵌套选项的选择组件。当其中一个 MenuItem
被禁用时,它也会禁用我想在菜单项被禁用时仅渲染的 Tooltip
。目前,当鼠标悬停在禁用的选项上时,不会显示工具提示。
<Select
label="Sort......."
value={sort}
onChange={handleSortChange}
>
//...
<MenuItem
value="priceAscending"
disabled={!hasStartLocation}
>
<SortTooltip
title="select starting location for price sort"
disabled={hasStartLocation}
>
Price: Low to High
</SortTooltip>
</MenuItem>
<MenuItem
value="priceDescending"
disabled={!hasStartLocation}
>
<SortTooltip
title="select starting location for price sort"
disabled={hasStartLocation}
>
Price: High to Low
</SortTooltip>
</MenuItem>
//...
</Select>
function SortTooltip({ title = '', children, sx, disabled = false, ...rest }) {
return (
<Tooltip
title={title}
arrow
followCursor
TransitionComponent={Zoom}
placement="left"
disableFocusListener={disabled}
disableHoverListener={disabled}
disableInteractive={disabled}
disableTouchListener={disabled}
sx={{ ...sx }}
{...rest}
>
<span>{children}</span>
</Tooltip>
);
}
预期行为 🤔
的想法是当一个选项被禁用时,会弹出一个工具提示,向用户展示如何与选择菜单项进行交互
上下文 🔦
- 无响应*
你的环境 🌎
尝试运行 npx @mui/envinfo
并返回此错误
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path /Users/Kirill/Documents/VSCode
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, lstat '/Users/Kirill/Documents/VSCode'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent```
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Kirill/.npm/_logs/2023-03-19T22_14_49_104Z-debug-0.log
<details>
<summary><code>npx @mui/envinfo</code></summary>
别忘了提及你使用的浏览器。
来自 npx @mui/envinfo
的输出放在这里。
</details>
7条答案
按热度按时间h6my8fg21#
你能提供一个CodeSandbox吗?你可以克隆这个模板:https://material-ui.com/r/issue-template-latest
tv6aics12#
这是组件的基本前提。为了简单起见,我将 $x_1^m_0^n_1^x$ 定义为 false,因为当 $x_1^m_1^n_1^x$ 返回未定义时,$x_1^m_2^n_1^x$ 应该被禁用,理想情况下,这是当用户悬停在禁用的 $x_1^m_3^n_1^x$ 上时 $x_1^m_4^n_1^x$ 是可用的。
$x_{1e0f}^{1}$
mepcadol3#
嘿,@hbjORbj,这个沙盒有没有帮助澄清这个bug?
omhiaaxx4#
关于这个问题,团队有什么更新吗?
k97glaaz5#
你好,我遇到了一个与嵌套Chip相同的问题。我想让我的chip即使项目被禁用也是可点击的。
截图:
参考:https://github.com/perses/perses/pull/1360/files#diff-5969817cf05c0ed12c3a7773071fc4ab21c8a3a1c0c8dfba7abde0ab76624459
b4qexyjb6#
Material UI的Select不支持这些场景。
然而,我们提供了一个应该在这些情况下表现良好的unstyled version of the Select in Base UI。缺点是你需要自己对其进行样式设计。
有关示例,请参阅https://codesandbox.io/s/vigilant-joji-wq8d97?file=/Demo.js。
我们将在未来的版本中实现Material UI的Select与Base UI的结合。在此之前,我们可能没有能力修复它。但是,如果社区中的某人对此感兴趣并希望创建一个带有修复的PR,我们将乐意接受它。
xfyts7mz7#
好的,了解了,谢谢!我们会等待的!