Why Input onChange acts like onKeyDown in ReactJs?

Question

In the following example, the onChange event fires each time the user type in a letter (like the onkeydown event) is this the normal behavior?

import React from 'react';

export default class Form extends React.Component {
  state = { name: '' };

  _handleNameChanges = ({ target }) => {
    this.setState({ name: target.value });
  };

  render() {
    return (
      <form>
        <input
          type="text"
          name="name"
          placeholder="John Doe"
          onChange={this._handleNameChanges}
          required
        />
      </form>
    );
  }
}

Dupocas · Accepted Answer · 2023-08-24T12:25:29.060

5

Yes, this is the normal behavior, what is happening is that as soon as the keyboard key is pressed, onKeyDown is triggered before the character is typed into the form field. onChange will only be fired if a combination of onkeydown and onkeyup happens. By stopping the propagation of either you will be able to not fire onChange

<input 
     onKeyDown={e => {e.stopPropagation(); e.preventDefault()}}
     onChange={e => console('never fires')}
/>

edited Aug 24 '23 at 12:25

answered Sep 05 '19 at 14:21

Dupocas

20,285
6
38
56

1

Very nice explanation, so how to achieve the default (old-school) `onchange` behavior? – Ahmed Kamal Sep 05 '19 at 14:28
This is the default behavior. The event gets triggered everytime the user press a key – Dupocas Sep 05 '19 at 14:30
@AhmedM.Kamal What do you mean with old-school behaviour? what behaviour are you looking for? – Ricardo Gonzalez Sep 05 '19 at 15:03
1

@RicardoGonzalez I mean the default `onchange` behavior like when you type in some value and the input loses focus (the event fires on blur not on keypress). – Ahmed Kamal Sep 05 '19 at 15:13
@Dupocas This is not the usual behavior of onchange (see [here](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange)) – stackoverflowed Jul 13 '21 at 10:52

score 4 · Answer 2 · answered Sep 05 '19 at 14:23

Yes, you can see more in the React docs

The onChange event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because onChange is a misnomer for its behavior and React relies on this event to handle user input in real time.

Along with a few examples: https://reactjs.org/docs/forms.html

score 2 · Answer 3 · answered Jul 13 '21 at 11:15

2

As mentioned above, React maps onChange to onInput (see here). Nonetheless, the solution is to use onBlur instead.

answered Jul 13 '21 at 11:15

stackoverflowed

686
8
22

Why Input onChange acts like onKeyDown in ReactJs?

3 Answers3

Linked

Related