Material-ui: Clickawaylistener doesn't fire on buttons and links

[sidonaldson]

Click Away Listener works by clicking outside of my component EXCEPT if you click on a button, link or seemingly any element with native click capabilities.

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

Current Behavior 😯

My component is active. I click "away" but on a button. onClickAway isn't triggered.

Expected Behavior 🤔

onClickAway to be triggered

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-07jhr

See demo. First click "open me first", then click the plain HTML button.

Context 🔦

Would seem like there is an issue with the event stack not bubbling up.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.1.1 |
| React | 16.9.0 |
| Browser | Chrome |
| TypeScript | 3.5.1 |
| Webpack | 4.39.3 |

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[sidonaldson]

@eps1lon how is this support? I included a demo which clearly shows the issue?

[eps1lon]

Sorry I added the label before submitting my response:

You are including the button within the clickaway listener. Any click dispatched from within ClickAwayListener is not considered clicking away i.e. "away" means outside of <ClickAwayListener />.

[sidonaldson]

@eps1lon ah man, how did I make that mistake! Doh!! Completely useless code demo. Thanks.

Since posting i've determined it's most probably React Routers NavLink hogging the event. Will look at there for a solution.

[icelic]

@sidonaldson Did you resolve the issue? I am having the same problem.

[sidonaldson]

@icelic Yes, I did! I ended up using the click away hook from this library instead https://streamich.github.io/react-use/?path=/story/ui-useclickaway--docs

It uses a slightly different method (delegation) to manage click-aways

@eps1lon worth looking into for MUI?

[eps1lon]

I don't understand how this is now considered an issue within the library? I showed you how you didn't use ClickAwayListener correctly and you agreed. Could you open a new issue explaining what the benefits of the other solution are?

[sidonaldson]

@eps1lon sure, the legacy of that bad demo is not helping here! This time I'm suggesting there could be an opportunity to improve the existing solution. I'll work up a real demo which shows the problem and create a new ticket. Thanks

[dan-valentine]

@sidonaldson did you ever create that new demo with the react-router-dom NavLink component breaking the clickawaylistener?