Inferno: Inferno's onChange Fired Before Checkbox State Changed

[ilyaigpetrov]

Observed Behaviour

In plain html checkboxes has onclick and onchange. onclick is fired before onchange and __after__ input.checked is mutated but you may cancel this mutation by calling event.preventDefault(). onchange is fired __after__ input.checked was mutated too but you can't cancel it via event.preventDefault().

In current [email protected] onChange is fired __before__ controlled checkbox is updated.
I think it's an error.

Expected Current Behaviour

I expect onChange to be fired with a new value of a input.checked so it can be passed to parent components and they may decide if to change the state or not.

JSFiddle

https://jsfiddle.net/ilyaigpetrov/wc9rc7nb/

Inferno Metadata

Linux
Chromium: 58.0.3029.110

UPD

I thought that onclick is fired before input.checked is mutated, that was a mistake.

[ilyaigpetrov]

The desired behavior worked in the previous 3.2.0, but 3.5.2 broke my UI.

UPDATE

I partly reproduced it in 3.2.0

[Havunen]

@AlgoTrader Did you investigate this? How should it work?

[AlgoTrader]

Sampo,

I have lot's of stuff at my work. I have fixed the code, but I would like
to check it in React. It would be great if we could run black box Inferno
tests against both Inferno and React.

Anton

2017-06-17 22:50 GMT+03:00 Sampo Kivistö [e-mail]:

@AlgoTrader https://github.com/algotrader Did you investigate this? How
should it work?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/infernojs/inferno/issues/1146#issuecomment-309236270,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABe_JhgW7r99J2mJMy5jWvJR_2cUsVkUks5sFC3rgaJpZM4N9TG1
.

[Havunen]

I think @LukeSheard was working on getting React running againts Inferno tests so we could cross verify more quickly / easily

[AlgoTrader]

The controlled input's behavior is not correct now. It was incorrect in 3.2 also.

In 3.5.x onChange is called when the checkbox was reset to current props value. Workaround is to use onClick, the value in onClick is correct.

Cancelling click for controlled input's is nonsense. Controlled inputs can ignore both onClick and onChange and in the case input is not toggled.

[iambumblehead]

I am having this issue as well.

If I render two checkboxes, one with inferno and another using innerHTML, the inferno checkbox state can never be changed --the innerHTML checkbox works as expected.

[iambumblehead]

rendering a checkbox this way reproduces the issue --I'm unable to change the value of this checkbox.

let inferno = require('inferno'), // reproduced w/ @3.6.1
    infernoh = require('inferno-hyperscript');

inferno.render(
  infernoh('input.testbox', {
    type : 'checkbox',
    name : 'testbox',
    checked : true
  }), document.body.firstElementChild);

'checked' must be true. The issue does no occur with older versions of inferno, such as @3.3.1

[Havunen]

Related to #1136

[ilyaigpetrov]

I made a mistake claiming that one event is fired before value mutation — both onclick and onchange are fired after mutation, see updated first message for details.

[Havunen]

Refactoring form elements is on my Todo list for Inferno V4. It would help a lot If you could provide test cases for them.

[anthony-redFox]

Fixed in dev branch and can be closed.

[ilyaigpetrov]

Thank you! In what version will the fix be published?

[ilyaigpetrov]

Sorry for bothering, was this fix published in 3.x.x or will it arrive in 4.x.x?

[anthony-redFox]

Only 4.

[Havunen]

You can test out v4 by using following command: npm i --save-dev inferno@next If you find any issues please open Github ticket.