React: Number input not firing onChange

[SergeyShablenko]

I don`t know if it is bug or feature, but since you put into input with type number two minuses it will stop calling onChange callback, but value inside input will change

React 15.4.2
Browser Version 60.0.3112.90 (Official Build) (64-bit)

[jquense]

Can you provide a reproduction in a jsfiddle or other similar tool?

cc @nhunzaker

[SergeyShablenko]

Tried on jsfiddle, but it works there, strange

[SergeyShablenko]

<input type="number" 
       className="form-control"
       value={typeof this.state.value !== 'undefined' && this.state.value !== null ? this.state.value : ''}
       onChange={e => this.onChange(e.target.value)} />

onChange(value) {
    const VALUE = parseFloat(value);

    this.setState({ value: VALUE >= 0 && !isNaN(VALUE) ? value : '' });
}

[Fasani]

It is odd that it would work with JSFiddle but not for you locally.

type=number may only work with the HTML 5 doctype. Did you specify HTML 5? (This is the only thing I can think without seeing more code.)

[shablenko]

Yes, i specified HTML 5

[antwan]

It does the same with <input type=radio> elements.

On this codepen, if you click on "one", then "two", then "one", then "two", only the first two onChange events are fired. Expected behaviour is to have the value changing everytime.

I tested with several HTML elements, but some of them are working (checkboxes for example).

Reproducible since 15.6.0, working with previous versions.
This is kind of a big deal as it's breaking our app, and surely many others.

[jquense]

@Antwan86 yup we are already aware of that issue, it's unrelated to this one though

[antwan]

My bad just saw the appropriate ticket. Keep up the good work!

[aweary]

This is mostly a duplicate of https://github.com/facebook/react/issues/6556. Here's an example that can reproduce the issue. If you type -- and then start typing numbers the value _appears_ to change but React isn't firing change events because the value is invalid. This same thing happens with other accepted non-numerical characters like e

[mpelham]

@Antwan86 your codepen was a great example of the issue. I made a minor fork of it and pinned it to 15.5.4 to highlight the issue in the hopes that others looking for a solution find this thread.

15.5.4:
https://codepen.io/anon/pen/RZVwYz

15.6.1
https://codepen.io/anon/pen/ayJMvL

[oliviertassinari]

The issue can be reproduced with @next: https://jsfiddle.net/ugr5sp1q/

[aweary]

Since the root cause is the same, I'm going to close this as a duplicate of https://github.com/facebook/react/issues/10370.

[oliviertassinari]

@aweary The issue can be reproduced in the v0.16.0 version: https://jsfiddle.net/d4a52zdk/. The issue can't be a duplicate of itself. You might want to reopen it.