mui
[IconButton][ClickAwayListener] Unexpected behavior depending on where button is clicked
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Current behavior 😯
When the child of a ClickAwayListener component is visible, and the user clicks on the SVG element (light blue in example) of an IconButton, the child hides as expected. In the same scenario if the user clicks on the ButtonBase element (dark blue) of the IconButton, the IconButton and ClickAwayListener events conflict and the child briefly starts to hide and immediately shows again.
Expected behavior 🤔
The ClickAwayListener child should hide regardless of where the IconButton is clicked, similar to the behavior of non-IconButton example of ClickAwayListener - https://mui.com/material-ui/react-click-away-listener/
Steps to reproduce 🕹
https://codesandbox.io/s/clickaway-material-demo-forked-uwoh3k?file=/demo.js
Steps:
- Click menu icon to show child element
- Click SVG element (light blue) of an IconButton, child hides
- Click ButtonBase element (dark blue) of an IconButton, child doesn't hide
- Uncomment conditional workaround to achieve expected(?) behavior
Context 🔦
This seems like an unintended behavior/bug but please let me know if I'm missing something. The example is a simplified version of my code, a menu icon that toggles a menu wrapped in a ClickAwayListener. The commented out id check for the originating button solves the issue, but it doesn't seem like it should be necessary?
Your environment 🌎
`npx @mui/envinfo`
System:
OS: macOS 12.3.1
Binaries:
Node: 16.14.2
Yarn: 1.22.17
npm: 8.1.4
Browsers:
Chrome: Not Found
Edge: 100.0.1185.44
Firefox: 91.0.1
Safari: 15.4
npmPackages:
@emotion/react: ^11.8.2 => 11.8.2
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.74
@mui/codemod: ^5.6.0 => 5.6.0
@mui/icons-material: ^5.5.1 => 5.5.1
@mui/lab: ^5.0.0-alpha.75 => 5.0.0-alpha.75
@mui/material: ^5.5.3 => 5.5.3
@mui/private-theming: 5.5.3
@mui/styled-engine: 5.5.2
@mui/styles: ^5.5.3 => 5.5.3
@mui/system: 5.5.3
@mui/types: 7.1.3
@mui/utils: 5.5.3
@types/react: 17.0.4
react: ^17.0.1 => 17.0.2
react-dom: ^17.0.1 => 17.0.2
typescript: 4.5.2
