[joy-ui][ButtonGroup] Clicking outside a menu doesn't close it
@siriwatknp is already working on this.
Since Nov 17, 2023.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.