How to detect modifiers when using a controlled input[type="checkbox"]?

[acheronfail]

TL;DR: How can I detect modifier keys when a controlled <input type="checkbox" /> is clicked?

// Fires a "click" event with modifiers (e.shiftKey, etc):
<input type="checkbox" onClick={e => console.log('shiftKey' in e)} /> // "true"
// Fires a "change" event WITHOUT modifiers (e.shiftKey, etc):
<input type="checkbox" onClick={e => console.log('shiftKey' in e)} checked /> // "false"

---

More details:

I want to be able to detect whether or not the Shift Key is pressed when a controlled checkbox is clicked.

The problem is that if the checked prop is passed to an input, then the onClick handler fires a "change" event instead of a "click" event. Unfortunately, "change" events don't have key modifier information.

Is this possible in some way?

I've made a minimal and reproducible example here: https://github.com/acheronfail/infernojs-checkbox-handler-example (index.html), if you run that and check the console you can see my problem.

[acheronfail]

FWIW, I've updated the example repository with a minimal example of the same thing using React, and the behaviour differs between React and Inferno (React provides the "click" event, so we can access key modifier information).

This table demonstrates the difference:

Events fired inside onClick handler	Inferno	React
<input type="checkbox" />	click	click
<input type="checkbox" checked />	change	click

[Havunen]

Hi

@acheronfail I didn't look into the code repo you provided yet. You could try using onclick={method} format instead of onClick this forces new click listener to be created on the html Node, non-synthetic event. Its less performant but that event will have the native click event for the given node.

[acheronfail]

@Havunen Yes, that does indeed work!

I'll keep this issue open anyway since I believe this diverging behaviour is not an intended feature of Inferno.