ClickAwayListener triggered by descendant Select

[pleopardi]

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

[Teivaz]

This only works with first child https://codesandbox.io/s/jzj7np639v
Is this expected?
The only notion of this in docs is that "The wrapped element" is referred to in singular.

Name	Type	Default	Description
children *	element		The wrapped element.
--	--	--	--

[oliviertassinari]

@Teivaz Check the warning in the console:

We are aware of this limitation, it's documented. Now, going forward, we are waiting on reactjs/rfcs#97 to land so we can accept a node over an element:

  /**
-  * The wrapped element.
+  * The wrapped node.
   */
- children: PropTypes.element.isRequired,
+ children: PropTypes.node.isRequired,

[Teivaz]

@octavioamu Thanks for clarification. I didn't see any warnings in my code and thought there was a bug in it. But after some investigation got it clear.

[Mishhub]

Add
MenuProps={{ disablePortal: true }}
prop to Select component. This fixed mine
Just like mentioned here #13216 (comment)

[oliviertassinari]

Duplicate of #18586