Child elements inside the <Button /> should be click-through

[mim-Armand]

Version

2.12.3

Environment

MAC, Chrome 61,

Reproduction link

https://codepen.io/anon/pen/EvKmNO?editors=001

Steps to reproduce

Please looks at the console to inspect the behavior in the Codepen sample while clicking on the <button/>, the <i/> and the <span/> elements

What is expected?

The target property of the emitted event should always be the <button />

What is actually happening?

The event is triggered with the target set to other elements ( child elements )
Clicking on the text and / or icon in the button changes the target property of the event to the <span /> or <i /> elements instead of element

---

adding the rule pointer-events: none to the children solves the problem but that's just a suggestion as I wasn't sure if this is actually a bug or a feature..

[ddcat1115]

I think it's a bug... Could you give us a PR to fix it?

[mim-Armand]

Sure, I will try to make a PR this week 👍

[jddxf]

@benjycui I don't quite understand why the event target should always be set to the button element. The target of an event should be the element where the event originates.

[mim-Armand]

@jddxf exactly, when you click on a <Button/> you expect it to be passed as the target, regardless on which part of the <Button/> you click on. ( that's teh whole promise of modules and components, a set of inputs and a set of consistent out-puts )
Now the Button component may have a <span/> or another element under the hood ( Which is not even usable as nobody knows it's there, it's litterally just under the hood ), these elements may be wrappers, may be invisible or integrated in the <Button/>. now imagine clicking on the same Button behaves differently each time, only because some times you clicked on the invisible span inside the Button and some times on the Button itself, that for sure is not consistent or desired.
So to your point, imo the event target should always be set to the button, when the Button element was clicked ( sub-components and elements should be click-through )

[jddxf]

@mim-Armand Got your point. IMO, it may be better to provide a Button instance as an argument in the callback if you'd like to offer component-level consistency. If the argument is an Event(or more specifically React.SyntheticEvent) instance, I suppose its target being the real event target, which offers dom-level consistency.
As a side note, you can always refer to the button with event.currentTarget.