Pass bound event listeners down to input component to avoid missing o…

…nchange handler warnings, fixes #135
i-like-robots · Nov 4, 2018 · a5ed94c · a5ed94c
1 parent 5695be2
commit a5ed94c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/lib/Input.js b/lib/Input.js
@@ -69,11 +69,13 @@ class Input extends React.Component {
   }
 
   render () {
-    const { inputAttributes, query, placeholder, expandable, listboxId, selectedIndex } = this.props
+    const { inputAttributes, inputEventHandlers, query, placeholder, expandable, listboxId, selectedIndex } = this.props
 
     return (
       <div className={this.props.classNames.searchInput}>
-        <input {...inputAttributes}
+        <input
+          {...inputAttributes}
+          {...inputEventHandlers}
           ref={(c) => { this.input = c }}
           value={query}
           placeholder={placeholder}

diff --git a/lib/ReactTags.js b/lib/ReactTags.js
@@ -38,6 +38,13 @@ class ReactTags extends React.Component {
       selectedIndex: -1,
       classNames: Object.assign({}, CLASS_NAMES, this.props.classNames)
     }
+
+    this.inputEventHandlers = {
+      onBlur: this.handleBlur.bind(this),
+      onFocus: this.handleFocus.bind(this),
+      onChange: this.handleChange.bind(this),
+      onKeyDown: this.handleKeyDown.bind(this)
+    }
   }
 
   componentWillReceiveProps (newProps) {
@@ -46,7 +53,7 @@ class ReactTags extends React.Component {
     })
   }
 
-  handleInput (e) {
+  handleChange (e) {
     const query = e.target.value
 
     if (this.props.handleInputChange) {
@@ -179,14 +186,10 @@ class ReactTags extends React.Component {
         <div className={this.state.classNames.selected} aria-live='polite' aria-relevant='additions removals'>
           {tags}
         </div>
-        <div
-          className={this.state.classNames.search}
-          onBlurCapture={this.handleBlur.bind(this)}
-          onFocusCapture={this.handleFocus.bind(this)}
-          onInput={this.handleInput.bind(this)}
-          onKeyDown={this.handleKeyDown.bind(this)}>
+        <div className={this.state.classNames.search}>
           <Input {...this.state}
             inputAttributes={this.props.inputAttributes}
+            inputEventHandlers={this.inputEventHandlers}
             ref={(c) => { this.input = c }}
             listboxId={listboxId}
             autofocus={this.props.autofocus}

diff --git a/spec/ReactTags.spec.js b/spec/ReactTags.spec.js
@@ -54,7 +54,7 @@ function type (value) {
     key(char)
     $('input').value += char
     // React calls onchange for every update to maintain state at all times
-    TestUtils.Simulate.input($('input'))
+    TestUtils.Simulate.change($('input'))
   })
 }