Normalized onChange event? about preact HOT 6 CLOSED

The backspace/delete issue is only in IE9, the remainder of issues are for making checkboxes and radio buttons magically fire onChange handlers using onClick (not a logical choice IMO, since onChange works fine for uncontrolled components and onClick works fine for controlled components), and for some oddities around <select> inputs that I have yet to observe in Preact (not sure why).

Here's React's onChange abstraction: https://github.com/facebook/react/blob/master/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js

Since Preact tries to avoid browser hacks and legacy APIs whenever possible, I thinking we should move this issue into preact-compat, so we can track progress on it there. preact-compat doesn't currently have any event normalization, but I think we're going to need at least a rudimentary solution in order to have consistency when pulling in third party libraries.

from preact.

The only normalization React does for onChange is for checkboxes - I find that confusing, since otherwise events are supposed to just work like DOM events, but they have invented new semantics for checkboxes.

Preact doesn't aim to support IE8 directly, which means you can use the native onInput event.
Demos here and here.

If this meets your needs, we can close the issue. Let me know!

from preact.

Hm. That's not quite right. onChange is something they do in a non-standard, but very helpful way.

For example, the following component will live-update the label as you type (assuming that updateValue is a function that updates the redux state or whatevs):

function Example({value, updateValue}) {
  return (
    <div>
       <label>Value is {value}</label>
       <input onChange={e => updateValue(e.target.value)} value={value} />
    </div>
  )
}

See their docs here as a reference: https://facebook.github.io/react/docs/forms.html

Preact is a really impressive accomplishment, by the way! I forgot to mention that. :)

from preact.

@chrisdavies Right, yes my explanation was off with regards to the event timing. That said though, the behaviour React awkwardly patches into onChange is exactly exactly how onInput works, isn't it?

Seems better to just use onInput, though I'm making a note that preact-compat should probably be normalizing onChange how React does.

from preact.

preact-compat does seem like a good place to stick it.

Here's a working example:
https://jsfiddle.net/69z2wepo/33832/

It's not quite the same as onInput as that behaves inconsistently across browsers. Some ignore delete/backspace, etc. I'm not 100% aware of all the differences, but I think React does a little cross-browser normalization magic in its onChange hijacking.

from preact.

@chrisdavies I'm going to close this issue since there is now preactjs/preact-compat#20. Cheers!

from preact.