[base-ui] Menu click away is broken if `transitionDuration` CSS property is used about material-ui HOT 3 OPEN

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.

from material-ui.

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

from material-ui.

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.

from material-ui.