Bug: onChange fires too often when using range sliders

[woutervh-]

React version 15.3.0
Chrome version 52.0.2743.116 m (64-bit)

Current behavior:
React fires onChange events for <input> with type range even when the browser's input change event does not fire.

Example:

<div id="container"></div>

const container = document.getElementById("container");

class App extends React.Component {
  componentDidMount() {
    this.refs['slider'].addEventListener('change', event => console.log(event.target.value));
  }

  render() {
    return <div>
      <input type="range" onChange={event => console.log(event.target.value)}/>
      <input type="range" ref="slider"/>
    </div>;
  }
}

ReactDOM.render(<App/>, container);

Try it here

Expected behavior
Observe the console output while dragging the sliders. For the first slider, the behavior is incorrect and it fires onChange while dragging the slider. For the second slider, the behavior is correct, and can be seen as a workaround for the incorrect behavior.

Reference:
https://www.impressivewebs.com/onchange-vs-oninput-for-range-sliders/

[aweary]

Hey @woutervh-, thanks for the report. This is expected behavior, as React normalizes the onChange event so it's consistent across browsers. See @spicyj's comment #2454 (comment):

Our plan here is to make onChange consistently fire on every change in all browsers; see #554. You can use onBlur or maybe onMouseUp if that's the behavior you're looking for, but the native onChange event varies widely across browsers even if we don't do anything special in React so that's probably not what you want.