[Select][material-ui] Disabled Menuitem, disables nested Tooltip within Select

ymdaylpp  于 3个月前  发布在  其他
关注(0)|答案(7)|浏览(52)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例:
步骤:

当前行为 😯

我有一个带有嵌套选项的选择组件。当其中一个 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>
h6my8fg2

h6my8fg21#

你能提供一个CodeSandbox吗?你可以克隆这个模板:https://material-ui.com/r/issue-template-latest

tv6aics1

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}$

mepcadol

mepcadol3#

嘿,@hbjORbj,这个沙盒有没有帮助澄清这个bug?

omhiaaxx

omhiaaxx4#

关于这个问题,团队有什么更新吗?

k97glaaz

k97glaaz5#

你好,我遇到了一个与嵌套Chip相同的问题。我想让我的chip即使项目被禁用也是可点击的。
截图:

参考:https://github.com/perses/perses/pull/1360/files#diff-5969817cf05c0ed12c3a7773071fc4ab21c8a3a1c0c8dfba7abde0ab76624459

b4qexyjb

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,我们将乐意接受它。

xfyts7mz

xfyts7mz7#

好的,了解了,谢谢!我们会等待的!

相关问题