2.12.3
MAC, Chrome 61,
https://codepen.io/anon/pen/EvKmNO?editors=001
Please looks at the console to inspect the behavior in the Codepen sample while clicking on the \, the \ and the \ elements
The target property of the emitted event should always be the \
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 \ or \ 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..
I think it's a bug... Could you give us a PR to fix it?
Sure, I will try to make a PR this week :+1:
@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.
@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 )
@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
.
Most helpful comment
@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 anEvent
(or more specificallyReact.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
withevent.currentTarget
.