Repository: material-ui
Issue: [ClickAwayListener] Calling onClickAway straightaway when used with Select
Labels: bug 🐛,component: select,component: ClickAwayListener

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

When a `Select` is used in conjunction with the `ClickAwayListener`, the `onClickAway` prop is called straightaway after the select is open.

<img src="https://user-images.githubusercontent.com/42154031/113340564-6f369d80-9302-11eb-8f08-83f257ca2de9.gif" alt="clickawaylistener" width="500">

## Expected Behavior 🤔

It should not call `onClickAway` while the `Select` is opening. `onClickAway`  should only be called when the user clicks OUTSIDE the select while it's open.

## Steps to Reproduce 🕹

Steps:

1. Open [codesandbox](https://codesandbox.io/s/gifted-currying-6bqkr?file=/src/App.js)
2. Click to open the select
3. Look at the console

## Context 🔦

This issue was first raised in https://github.com/mui-org/material-ui-x/issues/1314.  

## Proposed solution 💡

@oliviertassinari did some investigation in https://github.com/mui-org/material-ui/issues/18586 and I confirmed that the same behavior is happening here too. The click event is being called with the target `body` which forbids any attempt of the `ClickAwayListener` to check if it was inside or outside its children. I propose the following change based on Olivier's [diff](https://github.com/mui-org/material-ui/issues/18586#issuecomment-749170103).

```diff
diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.tsx b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.tsx
index 6bb56f9c4e..984b7c22f0 100644
--- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.tsx
+++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.tsx
@@ -123,6 +123,12 @@ function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {
       return;
     }

+    // The click event couldn't find its target, ignore
+    const eventTarget = event.target as Node | null
+    if (eventTarget?.nodeName === 'BODY' && event.type === 'click') {
+      return;
+    }
+
     let insideDOM;

     // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
```

## Your Environment 🌎

<details>
  <summary>`npx @material-ui/envinfo`</summary>
  
```

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
  Binaries:
    Node: 15.12.0 - ~/.nvm/versions/node/v15.12.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v15.12.0/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v15.12.0/bin/npm
  Browsers:
    Edge: 89.0.774.63
  npmPackages:
    @emotion/react: ^11.0.0 => 11.1.5
    @emotion/styled: ^11.0.0 => 11.1.5
    @material-ui/codemod:  5.0.0-alpha.27
    @material-ui/core:  5.0.0-alpha.28
    @material-ui/data-grid:  4.0.0-alpha.21
    @material-ui/docs:  5.0.0-alpha.28
    @material-ui/envinfo:  1.1.6
    @material-ui/icons:  5.0.0-alpha.28
    @material-ui/lab:  5.0.0-alpha.28
    @material-ui/styled-engine:  5.0.0-alpha.25
    @material-ui/styled-engine-sc:  5.0.0-alpha.25
    @material-ui/styles:  5.0.0-alpha.28
    @material-ui/system:  5.0.0-alpha.28
    @material-ui/types:  5.1.7
    @material-ui/unstyled:  5.0.0-alpha.28
    @material-ui/utils:  5.0.0-alpha.28
    @types/react: ^17.0.3 => 17.0.3
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    styled-components:  5.2.1
    typescript: ^4.1.2 => 4.2.3
```
</details>