From 1613038b435ccef5c1ccfce41b226d67b728898f Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 22 Feb 2018 02:02:23 +0900
Subject: [PATCH] fix(NumberInput): cope with user events being referred in
 async code (#597)

* fix(NumberInput): cope with user events being referred in async code

Fixes #566.

* fix(NumberInput): set <input> as an imaginary target of events being fired
---
 src/components/NumberInput/NumberInput.js | 27 +++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/NumberInput/NumberInput.js b/src/components/NumberInput/NumberInput.js
index 1b13fb917e24..5d9760b0b1c5 100644
--- a/src/components/NumberInput/NumberInput.js
+++ b/src/components/NumberInput/NumberInput.js
@@ -32,6 +32,12 @@ export default class NumberInput extends Component {
     invalidText: 'Provide invalidText',
   };
 
+  /**
+   * The DOM node refernce to the `<input>`.
+   * @type {HTMLInputElement}
+   */
+  _inputRef = null;
+
   constructor(props) {
     super(props);
 
@@ -53,6 +59,8 @@ export default class NumberInput extends Component {
 
   handleChange = evt => {
     if (!this.props.disabled) {
+      evt.persist();
+      evt.imaginaryTarget = this._inputRef;
       this.setState(
         {
           value: evt.target.value,
@@ -77,7 +85,8 @@ export default class NumberInput extends Component {
 
     if (!disabled && conditional) {
       value = direction === 'down' ? value - step : value + step;
-
+      evt.persist();
+      evt.imaginaryTarget = this._inputRef;
       this.setState(
         {
           value,
@@ -90,6 +99,14 @@ export default class NumberInput extends Component {
     }
   };
 
+  /**
+   * Preserves the DOM node ref of `<input>`.
+   * @param {HTMLInputElement} ref The DOM node ref of `<input>`.
+   */
+  _handleInputRef = ref => {
+    this._inputRef = ref;
+  };
+
   render() {
     const {
       className,
@@ -136,7 +153,13 @@ export default class NumberInput extends Component {
           {label}
         </label>
         <div className={numberInputClasses} {...inputWrapperProps}>
-          <input type="number" pattern="[0-9]*" {...other} {...props} />
+          <input
+            type="number"
+            pattern="[0-9]*"
+            {...other}
+            {...props}
+            ref={this._handleInputRef}
+          />
           <div className="bx--number__controls">
             <button
               {...buttonProps}