onMouseDown in a portal inside ClickAwayListener and onMouseUp inside the ClickAwayListener triggers onClickAway

[bartw]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-clickawaylistener-portal-issue-8oftui?file=/src/App.js

Steps:

1. Open the console
2. Click (but don't release) in the blue area
3. Move the cursor to the green area and release

Current behavior 😯

onClickAway is called on the ClickAwayListener

Expected behavior 🤔

onClickAway is not called on the ClickAwayListener because the portal is nested inside the ClickAwayListener

Context 🔦

We have a panel wrapped with ClickAwayListener that contains some form elements like a dropdown where we noticed this behaviour.

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 12.6.1
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.121
    Edge: Not Found
    Firefox: 107.0
    Safari: 16.1
  npmPackages:
    @mui/base: 5.0.0-alpha.106 => 5.0.0-alpha.106 
    @mui/types:  7.2.2 
    @mui/utils:  5.10.16 
    @types/react: 17.0.30 => 17.0.30 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.6.4 => 4.6.4 

[michaldudak]

Thanks for the report. When you move your mouse while clicking, the click event is triggered on elements that detected both mouseDown and mouseUp events - in this case body. To prevent this, you can set up ClickAwayListener to be triggered on another event, such as mouseDown. Let me know if it helps.