material-ui 点击菜单外部不会关闭它

3zwjbxry  于 5个月前  发布在  其他
关注(0)|答案(4)|浏览(55)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

这个bug在JoyUI的示例中是可见的:https://mui.com/joy-ui/react-button-group/#split-button
在分割按钮中,我们可以看到一旦菜单打开,点击它之外的地方不会关闭它,尽管这是JoyUI所有菜单的常见行为。

当前行为 😯

点击外部时,菜单不会关闭。

预期行为 🤔

将菜单 Package 到ButtonGroup中,检测到外部点击并自动关闭。

上下文 🔦

JoyUI菜单(外部点击时自动关闭)的常见行为是经典的,也是用户的预期行为。再次点击菜单按钮关闭它可能会让人烦恼。
这可能导致UI bug:例如,需要同时打开多个菜单。

你的环境 🌎

npx @mui/envinfo

Tested on Chrome and Firefox.

System:
    OS: macOS 13.5.2
  Binaries:
    Node: 20.3.1 - ~/.nvm/versions/node/v20.3.1/bin/node
    Yarn: Not Found
    npm: 10.2.3 - ~/Documents/hopfront/hopfront/node_modules/.bin/npm
  Browsers:
    Chrome: 119.0.6045.159
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.23 
    @mui/core-downloads-tracker:  5.14.17 
    @mui/icons-material: ^5.14.16 => 5.14.16 
    @mui/joy: ^5.0.0-beta.14 => 5.0.0-beta.14 
    @mui/material:  5.14.2 
    @mui/private-theming:  5.14.17 
    @mui/styled-engine:  5.14.17 
    @mui/system:  5.14.17 
    @mui/types:  7.2.8 
    @mui/utils:  5.14.17 
    @types/react: 18.2.37 => 18.2.37 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.2.2 => 5.2.2
hyrbngr7

hyrbngr71#

你好,我可以处理这个问题吗?

l7mqbcuq

l7mqbcuq2#

我很高兴能参与这个项目。

hgncfbus

hgncfbus3#

我想参与这个项目,你能给我分配一下吗?

k10s72fa

k10s72fa4#

我今天在使用按钮组的Menu组件时遇到了相同的bug:

这个问题可能与#38324有关。
我的解决方案是根据https://github.com/enricoros/big-agi/blob/main/src/common/components/CloseableMenu.tsx重新实现Menu组件。你可以使用CloseableMenu代替Menu,以实现Joy Menu组件的前者行为。

相关问题