[ClickAwayListemer] React.cloneElement can lead to overriding children onClick event

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Imagine you have a ClickAwayListener component which has a Grow transition as the child. And, this transition, in turn, has an element with props that ClickAwayListener would use, like onClick handlers. Those props are not forwarded by the Grow element.

Expected Behavior 🤔

The props are forwarded.

Steps to Reproduce 🕹

Open this sandbox and take a good look at the code. See that we’re using the Grow transition to create a nice animation when the Popper opens. Click on the button and click inside the Paper element. It should do nothing.

Now, comment out the Grow element and try clicking again inside the Poper element: you’ll get the alert saying Hi.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	16.12.0
Browser	Chrome 84.0.4147.105
TypeScript	3.9.3

[eps1lon]

cloneElement is just the only tool we have unless we add an extra <div> on which we listen for onClick in the ClickAwayListener. Ideally we’d have something like <React.Fragment onClick={handleClick}>{clickAwayListenerChilren}</React.Fragment> but no similar API exists in stable React releases right now.

This particular example can be fixed with

-<Grow in={isOpen} appear>
+<Grow in={isOpen} appear onClick={() => alert('hi')}>
  <Paper
-   onClick={() => alert('hi')}
    elevation={2}
  >

But this only works for Grow. Other transition components do have extra wrapper <div> where this wouldn’t be equivalent.

[eps1lon]

@eps1lon Should we close the issue?

At least I don’t see anything actionable right now. I suspect by the point React provides better primitives we will have forgotten about this issue.

See https://github.com/mui-org/material-ui/issues/22156#issuecomment-673691101 for the current workaround.