Merge pull request react-bootstrap#19 from checkhavoc/feature-add-han…

…dleInputChange Add handleInputChange event handler
aryad14 · Sep 29, 2015 · bcb47a9 · bcb47a9
2 parents c0e22c3 + ba67f25
commit bcb47a9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -101,6 +101,7 @@ Otherwise, you can simply import along with the backend itself (as shown above).
 - [`handleDrag`](#handleDragOption)
 - [`autofocus`](#autofocus)
 - [`allowDeleteFromEmptyInput`](#allowDeleteFromEmptyInput)
+- [`handleInputChange`](#handleInputChange)
 
 <a name="tagsOption"></a>
 ##### tags (optional)
@@ -187,6 +188,16 @@ Optional boolean param to control whether tags should be deleted when the 'Delet
     allowDeleteFromEmptyInput={false}
     ...>
 ```
+
+<a name="handleInputChange"></a>
+##### handleInputChange (optional)
+Optional event handler for input onChange
+
+```js
+<ReactTags
+    handleInputChange={this.handleInputChange}
+    ...>
+```
 
 ### Styling
 `<ReactTags>` does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. The component provides the following classes with which you can style - 

diff --git a/dist-modules/reactTags.js b/dist-modules/reactTags.js
@@ -32,7 +32,8 @@ var ReactTags = React.createClass({
         handleDelete: React.PropTypes.func.isRequired,
         handleAddition: React.PropTypes.func.isRequired,
         handleDrag: React.PropTypes.func.isRequired,
-        allowDeleteFromEmptyInput: React.PropTypes.bool
+        allowDeleteFromEmptyInput: React.PropTypes.bool,
+        handleInputChange: React.PropTypes.func
     },
     getDefaultProps: function getDefaultProps() {
         return {
@@ -61,6 +62,10 @@ var ReactTags = React.createClass({
         this.setState({ query: '' });
     },
     handleChange: function handleChange(e) {
+        if (this.props.handleInputChange){
+            this.props.handleInputChange(e.target.value.trim())
+        }
+
         var query = e.target.value.trim();
         var suggestions = this.props.suggestions.filter(function (item) {
             return item.toLowerCase().search(query.toLowerCase()) === 0;

diff --git a/lib/reactTags.js b/lib/reactTags.js
@@ -24,7 +24,8 @@ var ReactTags = React.createClass({
         handleDelete: React.PropTypes.func.isRequired,
         handleAddition: React.PropTypes.func.isRequired,
         handleDrag: React.PropTypes.func.isRequired,
-        allowDeleteFromEmptyInput: React.PropTypes.bool
+        allowDeleteFromEmptyInput: React.PropTypes.bool,
+        handleInputChange: React.PropTypes.func
     },
     getDefaultProps: function() {
         return {
@@ -53,6 +54,10 @@ var ReactTags = React.createClass({
         this.setState({ query: "" });
     },
     handleChange: function(e) {
+        if (this.props.handleInputChange){
+            this.props.handleInputChange(e.target.value.trim())
+        }
+
         var query = e.target.value.trim();
         var suggestions = this.props.suggestions.filter(function(item) {
             return (item.toLowerCase()).search(query.toLowerCase()) === 0;