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

[AnthonyMde]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the 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]

@siriwatknp hey, can i work on this?

[AjayAsnani]

I would be happy to work on this.

[aman44444]

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

[enricoros]

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

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.