base-ui
base-ui copied to clipboard
mui
[Menu] Menu click away is broken if `transitionDuration` CSS property is used
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/compassionate-burnell-mns7ll
https://github.com/mui/material-ui/assets/4148577/f077aa91-e336-4c5b-bfaa-2723bd85f78d
Steps:
- Click on the first menu button, then click anywhere else on the page. The menu will collapse.
- Click on the second menu button, then click anywhere else on the page. The menu will not collapse.
Current behavior
If I use the transitionDuration CSS property when styling the menu, it will not collapse when I click away from it.
Expected behavior
The menu should always collapse, no matter how I style it.
Context
I want the menu to collapse when I click away from it, no matter how I style it.
Your environment
npx @mui/envinfo
I used Chrome when testing this issue.
System:
OS: macOS 14.2.1
Binaries:
Node: 18.19.0 - /opt/homebrew/bin/node
npm: 10.4.0 - /opt/homebrew/bin/npm
pnpm: 8.6.1 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 121.0.6167.160
Edge: Not Found
Safari: 17.2.1
npmPackages:
@emotion/react: 11.11.3 => 11.11.3
@emotion/styled: 11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.36 => 5.0.0-beta.36
@mui/utils: 5.15.9 => 5.15.9
@types/react: 18.2.55 => 18.2.55
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 5.3.3 => 5.3.3
Search keywords: menu click away broken css
Hello, I reproduced your issue on my local machine by following all the steps. However, for me it seems to be working, the menu collapses when I click away from it no matter how I style it.
https://github.com/mui/material-ui/assets/122678675/16c3adbc-032b-4c2d-b3c6-dab325f9e80e
@EyaOuenniche Your video doesn't appear to show the second menu animating at all. For me, the issue happens when I add the transitionDuration property to the styles of the second menu.
If you did that, it may also require there to be an animatable property. In my demo, both menus change from height: 0 to height: 80.
I'm sorry for the confusion, I reproduced again your issue, and I added the transitionDuration property. I think I'm having a problem in the animation it's not working correctly, but nonetheless I found the same problem I think there is an area where you click on it, it will close, it's the area where the items are displayed. Also, I think if you repeat the process of opening and closing the menu several times, you will notice that at some point it will work, and the menu will collapse when you click away from it.
I have a suggestion, maybe the issue is due to the way the Dropdown and Menu components from @mui/base handle closing, the Dropdown or Menu might be trying to close before the transition is complete, which could be causing the menu to stay open.
Are there any updates on this issue? It is still happening with the latest version, 5.0.0-beta.40.
The root issue here is that the menu item is not focused after a menu opens; therefore, its blur handler (which closes the menu) does not fire when you click outside.
The new transition API should account for this, notifying the element when the transition finishes, so it can be focused (cc @atomiks).
We will take this into consideration when redesigning the Menu's API (which should happen around June).
