Material-ui: Huge problem with onClick event on Buttons with chrome

[llllGEM]

Problem description

Every event with onClick prop on every Button type (Raisedbutton or Flatbutton or Icon etc...)
I can't get the event.target.id or any other prop from the target as it is undefined, works perfectly on firefox but not on chrome, can you provide a workaround or a fix ?

toggleUpdate(event){ event.target.id //undefined}

Versions

• Material-UI: 0.19
• React: "^15.6.1"
• Browser: Chrome

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

[llllGEM]

You made too many changes and plus there are less components in the beta, could you provide a workaround please to use chrome ? @oliviertassinari

ps: your project is awesome, but I juste need one thing, the event.target.id with chrome on a button, the rest works perfectly

[oliviertassinari]

@llllGEM Feel free to submit a PR to address the issue, we will review it. We are now focusing on the v1-beta branch.

[slavab89]

This works on V1. Just verify that you do gave a id on the button element that's rendered.

[llllGEM]

@slavab89 no it doesn't, here is my button

when I click on the label inside the button I don't get the Id I must click inside the button outside the label for the handleclick method to get the id, which is very unpleasant and not a stable behavior, try it yourself on chrome, BTW I updated to beta9 and the issue is still there

[slavab89]

I see what you mean
Here is a reproduction: https://codesandbox.io/s/w0nq43yw67

So based on the spec + stackoverflow it seems that button cant contain anything that's considered clickable and the recommendation is to use div instead when you want to have a styled button.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Reference: https://stackoverflow.com/questions/11069410/click-event-for-element-nested-within-a-button

As an reference, material-web-components did a simple string inside the button while applying the ripple in some other manner
https://material-components-web.appspot.com/button.html
@oliviertassinari any knowledge on this?

[oliviertassinari]

@llllGEM Use event.currentTarget over event.target.

[AndreyK-git]

@oliviertassinari thank you sir! I was having the same problem and that did the trick