onChange() does not work properly with <input type="number">, see fac…

…ebook/react#11142

README.md

@@ -170,3 +170,4 @@ If you support older browsers (<IE11) you will need a global polyfill such as [c
 ## Notes
 
 - A [`readonly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) or `disabled` input won't trigger any HTML5 form constraint like [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required).
+- With `<input type="number">` it's better to use `onInput` instead of `onChange`, see https://github.com/facebook/react/issues/11142

examples/HttpStatusCode/App.tsx

@@ -54,8 +54,9 @@ class Form extends React.Component<Props, State> {
                            onSubmit={this.handleSubmit} noValidate>
         <div>
           <label htmlFor="http-status-code">HTTP Status code (enter 200, 404, 500, 503)</label>
+          {/* onChange() does not work properly with <input type="number">, see https://github.com/facebook/react/issues/11142 */}
           <input type="number" name="httpStatusCode" id="http-status-code"
-                 value={this.state.httpStatusCode} onChange={this.handleChange}
+                 value={this.state.httpStatusCode} onInput={this.handleChange}
                  min={100} max={599} required />
           <FieldFeedbacks for="httpStatusCode">
             <FieldFeedback when="*" />