ClickAwayListener triggered by descendant Select

I’m opening this issue because I saw the discussion here but the pull request closing the issue doesn’t seem to apply to my case.

I have a Select component which is a descendant of a ClickAwayListener component. Clicking on one of the MenuItems triggers the callback of ClickAwayListener.

I saw the pull request adding disablePortal option but I couldn’t find a way to apply it to Select (I saw it only in Popper and Modal components).

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

ClickAwayListener callback shouldn’t be triggered clicking on a descendant component.

Current Behavior

But it does and I can’t find a way to apply the disablePortal fix to Select component. I’d like to avoid using native select to solve the issue.

Steps to Reproduce

Link:

1. Basic Example

Context

I have a Collapse containing several filters which closes every time I select an item from the Select filter.

Your Environment

Project generated with create-react-app, not ejected.

Tech	Version
Material-UI	v3.1.2
React	v16.5.2
Browser	Chrome
TypeScript	No
etc.

[oliviertassinari]

@pleopardi Here is an example:

      <ClickAwayListener onClickAway={this.handleClickAway}>
        <Select
          value={this.state.selected}
          onChange={this.handleChange}
          MenuProps={{ disablePortal: true }}
        >
          <MenuItem value="first">First Option</MenuItem>
          <MenuItem value="second">Second Option</MenuItem>
        </Select>
      </ClickAwayListener>

https://codesandbox.io/s/qv6z7k32nw

[oliviertassinari]

Duplicate of #18586