Preventing default and stopping propagation

[chrismcv]

Is your feature request related to a problem? Please describe.
I find I'm having to add a lot of e.stopPropagation() or e.preventDefault() on Buttons, MenuItems and DropDownMenu's.

Describe the solution you'd like
e.g.

I have an Accordian, with a Dropdown Menu in the header, I handle onClick by triggering an action, and the Accordian collapses without a stopPropagation. It also regularly causes modals to trigger close etc.

I'd like MenuItem/Button/Actionable/DropDownItems to call preventDefault before triggering the onClick event to the consuming component.

Describe alternatives you've considered
I'm considering forking components to add this in by default, but I'd rather not have to.

[blvdmitry]

Preventing this by default could cause side effects that would affect global event handlers. For example, if analytics are tracking user clicks on body elements, stop propagation will prevent it from being tracked when clicking on any button.

Potentially a good middle ground is to have boolean props to preventDefault and stopPropagation for all clickable elements? Would that work for you too?

[chrismcv]

yeah that would be great - or if could sit on the reshaped provider context that could work too?

[blvdmitry]

Hey Chris, just getting back to this ticket. Having this on the provider level could cause a lot of unexpected side effects so I would recommend adding this property only in the cases when you nested a one clickable element inside another.

This also made me wonder if just having stopPropagation flag would solve the problem in your case. For example, this code snippet seems to be already supporting what you're describing. Clicking on Actionable 2 only triggers its console.log:

<Actionable onClick={() => console.log("Click 1")}>
	Actionable 1{" "}
	<Actionable as="div" stopPropagation onClick={() => console.log("Click 2")}>
		Actionable 2
	</Actionable>
</Actionable>