Change:
It would be nice for the to be more explicit about the fact that React's supersedes, and should generally be used in place of, the DOM's built-in event. People might be used to using instead for text inputs and textareas, since, with the raw DOM, the change event for these controls doesn't fire until the control loses focus.
Opened a PR to address this:
Merged, hurray, we can close this now! :tada:
wait but why?
I don't understand why React chose to make behave like does. As fas as I can tell, we have no way of getting the old behaviour back. Docs claim it's a "misnomer" but it isn't really, it does fire when there's a change, just not until the input also loses focus. For validation, sometimes we don't want to show validation errors until they're done typing. Or maybe we just don't want a re-render on every keystroke. Now the only way to do that is with onBlur but now we also need to check that the value has changed manually. It's not that big of a deal, but it seems to me like React threw away a useful event and deviated from standard behaviour when there was already an event that does this.
Agree with mnpenner. With fireing on every keystroke, my redux store changes simultaneously. To avoid that, I have to use . Finally, we have two events - and - which work same manner.
Besides there is no easy workaround to replicate such behaviour for the element. Native events behave such way that moving the slider around triggers an event and releasing it triggers .
Another note: Autofill events (at least on Chrome/OSX) trigger , but not ! So if I want to capture a change event to an input that might be filled using Chrome's autofill feature, I need to bind to both (to detect keystrokes and autofill) and (to placate React [1]). [1]
for validation messages or things that you want to wait until they stop typing for use debounce in your event handler instead of waiting until onBlur.
Still no way of using onChange? I've been writing lots of logic to get around not having a real change event. I think to be a better abstraction, React needs to stick to onChange and let us use onInput without a silly warning. Validation has never been this hard.
For better or worse, this has been the behavior for quite a while, and many React users rely on it. IMHO, it's probably too late in the game to totally change what "onChange" means in React. But if you feel strongly, maybe do a quick PR to propose a solution with a sensible upgrade path? (Before spending a lot of time on it, get the thoughts of the core team.)
Right I've suggested instead to create a new event and minimise breaking changes.
Definitely a huge design issue with React. Hope it doesn't stay this way forever
This is a mistake or a feature :/
Features are supposed to be useful... this is the opposite of useful.
For anyone who needs a workaround to get true onChange behavior, you can implement your own component to use HTML's built-in event. Here's how I've done it, inspired by . Kaspar's allows you to use both onchange and oninput, mine is just for onchange.
Looks like there is an official answer now:
I don't think that's new. See
It is really aggravating, this "official answer". How presumptuous of them to call the HTML Spec official and consolidated event name a "misnomer".
2024 and issue still exists, this one wasted a serious chunk of time, atleast I now have an answer but if I didnt trust facebook before I sure dont trust them now. Always follow the spec, there should be no alternative breaking change or not.
Guys for people looking to do it with functions, expanding on Ettar solution, this seems to be working (here I am using MUI component, but input component works as well):

Discussion:
Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events. <ins> > Note: > > For `<input>` and `<textarea>`, `onChange` supersedes — and should generally be used instead of — the DOM's built-in [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) event handler. </ins> ## Controlled Components