material-ui [选择][Material UI] Select允许在关闭时进行第二次选择,

fdx2calv 于 6个月前发布在其他

关注(0)|答案(4)|浏览(48)

重复问题

我已搜索现有的问题

重现步骤 🕹

链接到实时示例：
带有缓慢过渡的示例，用于说明问题： https://codesandbox.io/s/intelligent-ben-wsfz3w?file=/Demo.tsx:823-921
步骤：

打开选择器
选择一个选项
在过渡进行时点击另一个选项。
第二个选项的值将被设置

当前行为 😯

当从Select组件下拉菜单中选择菜单项时，如果用户双击，可能会意外地选择第二个项目。

预期行为 🤔

一旦从菜单中做出选择，就不应该能够再次做出选择。

上下文 🔦

客户在双击时意外地选择了错误的选项。

你的环境 🌎

npx @mui/envinfo

Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

material-ui

来源：https://github.com/mui/material-ui/issues/38414

4条答案

按热度按时间

vfwfrxfs1#

你可以通过样式覆盖来禁用关闭菜单上的指针事件：

const theme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        list: {
          [`.${menuClasses.root}[aria-hidden] &`]: {
            pointerEvents: "none"
          }
        }
      }
    }
  }
});

查看 https://codesandbox.io/s/naughty-lake-h2sm26?file=/Demo.tsx 获取完整演示。
这有帮助吗？

赞(0）回复(0）举报 6个月前

ef1yzkbh2#

你可以通过样式覆盖来禁用关闭菜单上的指针事件：

const theme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        list: {
          [`.${menuClasses.root}[aria-hidden] &`]: {
            pointerEvents: "none"
          }
        }
      }
    }
  }
});

查看 https://codesandbox.io/s/naughty-lake-h2sm26?file=/Demo.tsx 获取完整演示。
这有帮助吗？
谢谢，这个方法有效！只是好奇这个组件的多选行为是否符合预期？

赞(0）回复(0）举报 6个月前

p5cysglq3#

我怀疑有人会依赖这个"特性"。我们可以在源代码中修复它。你对发起一个PR感兴趣吗？

赞(0）回复(0）举报 6个月前

cl25kdpy4#

@michaldudak can you please assign this issue to me?

赞(0）回复(0）举报 6个月前