v3.10.0 broke the onChange for the input radio

[cedmax]

The changes to fix the onChange being executed twice for the checkboxes (issue: preactjs/preact#358, pr: #247) introduced a problem with the input[type="radio"]: looking at the code it seems like you are deleting the onChange for any input type not checkbox, in favour of an onInput, but the radio wouldn't work with it.

I created a pull request for it too
#287

[developit]

Awesome and thanks a bunch for the quick PR!

[mjsisley]

This breaks when attribute.type === 'file' with components such as https://github.com/odysseyscience/react-s3-uploader that use onChange.

I stopped deletion of the onChange prop with if (attributes.type !== 'file') { delete attributes[props.onchange] };

Firefox triggers the onChange callback twice. (Chrome and Safari work as expected, haven't tried IE/Edge).

[developit]

I think @cedmax's fix would fix that case too.

[CPatchane]

Agree with @mjsisley, the event onChange (and onInput) for input type='file' still doesn't fire on Chrome and Safari even using the preact-compat last version v3.11.0. But that seems to work on Firefox. Here is the code part I used for the test:

<input
    type='file'
    onChange ={e => console.log(e)}
  />

(That works correctly when using preact only.)

[developit]

Here's a thought: what if we changed this line from its current implementation:

let attr = nodeName==='input' && /^che|rad/i.test(attributes.type) ? 'onclick' : 'oninput',

...to:

let attr = nodeName==='input' && /^fil|che|rad/i.test(attributes.type) ? 'onchange' : 'oninput',

... think that'd work? IIRC onchange works as desired for checkbox and radio inputs like we want for type="file".

[CPatchane]

Awesome @developit, this fix seems to do the job, onChange events are now correctly fired on Chrome, Safari and Firefox in my tests. And onChange events for checkbox and radio work as desired.

Thanks 👍 . Looking forward to get this fix release 🎉

[developit]

Fixed on master! Waiting for a resolution to #292 before we release.