[ClickAwayListener] Triggers on Select (and more)

This is best explained using code.

The following example is constructed by copy/pasting code form the docs and combining ClickAwayListener and Select.

When an option in Select is chosen the ClickAwayListener triggers the callback, despite Select being its descendant.

<ClickAwayListener onClickAway={this.handleClickAway}>
    <Paper className={classes.paper}>
        <Select
            multiple
            value={this.state.selected}
            onChange={this.handleChange}
            input={<Input id="select-multiple" />}
            MenuProps={MenuProps}>
            {names.map(name => (
                <MenuItem key={name} value={name}>
                    {name}
                </MenuItem>
            ))}
        </Select>
    </Paper>
</ClickAwayListener>

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Select should normally close with the chosen value being the current in the Select and the click-away trigger shouldn’t fire.

Current Behavior

When an option in Select is chosen the ClickAwayListener triggers the callback, despite Select being its descendant.

Note that this doesn’t happen if select is in native mode with options instead of MenuItems. The same behaviour is exhibited in both multi- and regular Selects.

Steps to Reproduce (for bugs)

See codesandbox: https://codesandbox.io/s/3qq7l6478m, forked from the one in docs: https://codesandbox.io/s/6llvjywwq3

Context

I have a Select in a Drawer that contains a form. The Drawer has ClickAwayListener enveloping its content, including Select.

When a value is chosen in Select, the click-away trigger is executed (and it closes the Drawer in my app).

Your Environment