DEV Community

loading...

Browser and React onChange event: The conundrum

Pulkit Kashyap
UI Engineer @Flipkart | Open source enthusiast | Love to code and talk about JS
・2 min read

The Problem

Sometimes I think we all are so inclined towards Javascript frameworks or libraries that we don't pay attention to how things work natively. Recently when I was debugging an issue about input tag's onchange event, I was startled when the callback function was not being called on changing the input value. Well, React triggers onChange whenever one changes the input value. Coming from React I just assumed that such things would work the same in vanilla Javascript 😔 😔 . The way browser fires the onchange event is different.

Javascript onchange

Coming from React it's easy to fall into the trap. But let's understand some events the browser fires when one interacts with the input tag

  • onfocus - Fired when the user sets focus on the element
  • onblur - Opposite of onfocus. Fired when an element loses focus
  • onchange - (the most interesting one 😅). Unlike React, the browser fires onchange event after focus from input element is taken off. So when focus is set on an input element and something is typed, onchange won't be fired until and unless the input element is out of focus.

When an element is out of focus, the browser assumes that the user is done making the change(probably the reason why onchange is fired late).

Let's see this in action. Check out the JS part here and open your console to see what is logged.
Note that onchange is fired only when input is out of focus

Question for the readers 🧐

I am not too sure as to why in the above example onblur callback is fired after the onchange callback. We know now that onchange is fired when the element is out of focus. Know the reason?? Please comment down below.

React onChange

Apart from the camel case difference the way React onChange handler works is also pretty different. It gets triggered whenever one makes a change in the input element value.
I tried to create something like React onChange. Let's have a look (not saying that this is how it works exactly).

  • I had attached my custom onChange callback to the element.
  • Using setter/getter to get the previously entered value and compare it with the latest one.
  • Additionally attached a keyup event listener to get hold of the latest value
  • Notice that the custom onChange handler gets triggered everytime a change is made.

Bye Bye !! 👋👋 Hope there were takeaways.

Let's connect

Linkedin
Twitter
Github

Discussion (10)

Collapse
miketalbot profile image
Mike Talbot

onchange is fired when "the user commits the change" to the input field. So it happens when they press Enter or leave the field for a standard text input or text area. Given this is an input event it occurs before the more general onblur.

Collapse
fjones profile image
FJones
Collapse
kpulkit29 profile image
Pulkit Kashyap Author

Couple of drawbacks when using input event caniuse.com/input-event

Collapse
lukeshiru profile image
LUKESHIRU

What drawback? It doesn't work in Opera Mini, and IE 8 and below, which nowadays doesn't matter at all :/

Thread Thread
kpulkit29 profile image
Pulkit Kashyap Author

Check notes for caniuse.com/input-event

Thread Thread
lukeshiru profile image
LUKESHIRU

Yup, I know, but aren't you working with a text input? In this scenario is ok to use the input event. input isn't regular when you use checkbox, radio or select.

Collapse
lukeshiru profile image
LUKESHIRU

You could just:

const input = document.querySelector("#dev");
const paragraph = document.querySelector(".curr-value");

input.addEventListener("input", ({ currentTarget }) => {
    paragraph.innerText = currentTarget.value;
});
Enter fullscreen mode Exit fullscreen mode
Collapse
kpulkit29 profile image
Pulkit Kashyap Author • Edited

Yup agreed. Could have used that.

Collapse
jonrandy profile image
Jon Randy • Edited

Coming from React I just assumed that such things would work the same in vanilla Javascript

This is the problem with not knowing the basics before moving to a framework. I've interviewed many, many developers who simply cannot do anything without React or framework XXX and all the associated tooling. That is a really bad state for the industry to be in

Collapse
kpulkit29 profile image
Pulkit Kashyap Author

Completely agree