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

fdx2calv  于 4个月前  发布在  其他
关注(0)|答案(4)|浏览(38)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

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

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

当前行为 😯

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

预期行为 🤔

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

上下文 🔦

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

你的环境 🌎

npx @mui/envinfo

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

vfwfrxfs1#

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

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

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

ef1yzkbh

ef1yzkbh2#

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

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

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

p5cysglq

p5cysglq3#

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

cl25kdpy

cl25kdpy4#

@michaldudak can you please assign this issue to me?

相关问题