[Menu] Menu click away is broken if transitionDuration CSS property is used

[stephenwade]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/compassionate-burnell-mns7ll

issue.mp4

Steps:

1. Click on the first menu button, then click anywhere else on the page. The menu will collapse.
2. 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

[EyaOuenniche]

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.

2024-02-09.08-25-57.mp4

[stephenwade]

@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.

[EyaOuenniche]

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.

[stephenwade]

Are there any updates on this issue? It is still happening with the latest version, 5.0.0-beta.40.

[michaldudak]

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).