[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

https://github.com/mui/material-ui/assets/4148577/f077aa91-e336-4c5b-bfaa-2723bd85f78d

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