search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.42k stars 32.16k forks source link

[joy-ui][ButtonGroup] Clicking outside a menu doesn't close it #39903

Open AnthonyMde opened 10 months ago

AnthonyMde commented 10 months ago

Duplicates

Latest version

Steps to reproduce 🕹

The bug is visible on the JoyUI examples here : https://mui.com/joy-ui/react-button-group/#split-button In the split button we can see that once menu is opened, clicking outside of it does not close it despite it's the common behavior of all JoyUI's menu.

Current behavior 😯

Menu does not close when clicking outside.

Expected behavior 🤔

Menu wrapped into a ButtonGroup detects an outside click and automatically closes.

Context 🔦

The common behavior of JoyUI's menu (automatic closing on outside click) is the classical and the expected behavior by the user. It can be annoying to click again on the menu button to close it. It can leads to UI bug : e.g having to menu opened in parallel.

Your environment 🌎

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 ```
aman44444 commented 10 months ago

@siriwatknp hey, can i work on this?

AjayAsnani commented 10 months ago

I would be happy to work on this.

aman44444 commented 10 months ago

@siriwatknp i wanna work on this can you please assign this to me?

enricoros commented 9 months ago

I bumped into the same bug today as I was using the Menu component from a button group: image

This issue maybe related to #38324.

My solution is to reimplement the Menu component as per https://github.com/enricoros/big-agi/blob/main/src/common/components/CloseableMenu.tsx. You can use that CloseableMenu instead of Menu, to achieve the former behavior of the Joy Menu component.