Can't prevent event bubbling when clicking away from a Select component

[JulsRicketti]

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

Note: This may have a similar source issue to #25578, but the problem itself is a bit different, so I chose to open a new bug report.

Current Behavior 😯

See the current demo

I have a div which includes a Checkbox and a Select dropdown implemented with a ClickAwayListener.
The div wrapping both those elements should behave in such a way that if you click anywhere within it, the checkbox should be toggled. Of course the exception is if you click on the Select, at which point nothing should happen to the checkbox and instead, the select dropdown should open or close as needed.

I've prevented the event propagation when opening and selecting items from the checkbox, but if I click away from it, the checkbox toggles regardless, even if away from the div.

Expected Behavior 🤔

Once the checkbox is opened I should be able to click away from it and have it not trigger the checkbox, specially if the click isn't even on the div.

Steps to Reproduce 🕹

Demo

Steps:

1. Open the dropdown
2. Click anywhere else without selecting an item from the dropdown

You should be able to close the dropdown without toggling the checkbox.

[eps1lon]

You change toggle the checkbox in the click handler of the div. However, the Dropdown is nested in this very div so any click on the dropdown will also bubble to the div.

This is how events work on the web. We can't fix this without breaking use cases relying on event bubbling.

You probably want to stop propagation in onClick, not onClickAway since onClickAway has no specified event phase.

Note that the UI would behave the same way when you would swap the Select with a native select.

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.