React: Bug: onClick firing when radio button is selcted with arrow keys

[ro-savage]

Current behaviour
the onClick handler is being fired when a radio button is selected using the arrow keys.

Expected behaviour
onClick not fired when navigating radio buttons with arrow keys

Example
http://jsbin.com/hupazohada/edit?html,js,output
(Click radio 1, the press down or right to navigate to second radio box. ReactEvent is logged to console / alert appears)

Tested with
React 15.0.3 & 15.0.1 / Chrome 51 / OS X

[ro-savage]

For anyone else running into this issue, the event shows X & Y of the click to be 0 when the keyboard fires the onClick event. So its possible to check e.clientX / e.clientY / e.pageX/ e.pageY or the e.nativeEvent.clientX etc

For our code we are using

if (e.type === 'click' && e.clientX !== 0 && e.clientY !== 0) {
   // This is a real click. Do something here
}

[brigand]

Seems to be the same behavior without react: https://jsfiddle.net/h0L8gf4e/

[ro-savage]

Just tested in other browsers:

Chrome 51 + IE11: Changing with arrow keys causes onClick event to fire (both react and native onclick)

Firefox 49: Arrow key fires onClick. But arrow key can only navigate if you tab into radio buttons, not if you click a radio button then use arrow keys

Safari: Can't use arrow keys to navigate radio buttons, and can't tab into radio buttons

[ro-savage]

From my reading of the W3C spec, this is correct behaviour.

According to: https://www.w3.org/TR/2012/WD-html5-20121025/content-models.html#interactive-content

Certain elements in HTML have an activation behavior, which means that the user can activate them. This triggers a sequence of events dependent on the activation mechanism, and normally culminating in a click event, as described below.

The user agent should allow the user to manually trigger elements that have an activation behavior, for instance using keyboard or voice input, or through mouse clicks. When the user triggers an element with a defined activation behavior in a manner other than clicking it, the default action of the interaction event must be to run synthetic click activation steps on the element.

I'll leave this issue open for 48hrs to see if anyone else has a comment / different interpretation of spec. If there's no comments/different ideas I will close the issue.

[brigand]

Seems pretty clear that the spec and behavior match up. Even ignoring the spec's opinion, I think it's very rare that you care about anything other than "the radio was selected", so I wouldn't change react to filter the events out.

[zpao]

Thanks for the investigation everybody. Since this is just browser behavior that doesn't seem to need any "correction", I'm just going to close out now.