Add clear() method, onKeyDown/Up props and focus on input

when component is clicked.
olahol · May 30, 2015 · a9481fd · a9481fd
1 parent 8020070
commit a9481fd
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+### 1.3.5 (2015-05-30)
+
+* Add clear methodj
+* Add onKeyDown and onKeyUp props.
+* When clicking on the component focus on the input.
+
 ### 1.3.2 (2015-04-29)
 
 * Ignore falsey values from `transform`.

diff --git a/README.md b/README.md
@@ -140,6 +140,15 @@ Callback when the input changes, the argument is the value of the input.
 
 Callback when input field blurs.
 
+##### onKeyDown
+
+Callback when a key down event is triggered on the tag input which is not
+in the removeKeys or addKeys.
+
+##### onKeyUp
+
+Callback when a key up event is triggered on the tag input.
+
 ##### onTagAdd
 
 Callback when a tag is added, argument is the added tag.
@@ -154,6 +163,10 @@ Callback when a tag is removed, argument is the removed tag.
 
 Focus on the tag input.
 
+##### clear()
+
+Clear the tag input.
+
 ##### getTags()
 
 Returns an array of the current tags.

diff --git a/bower.json b/bower.json
@@ -4,7 +4,7 @@
     "react-tagsinput.js",
     "react-tagsinput.css"
   ],
-  "version": "1.3.4",
+  "version": "1.3.5",
   "homepage": "https://github.com/olahol/react-tagsinput",
   "description": "Simple react.js component for inputing tags",
   "keywords": [

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tagsinput",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "Simple react.js component for inputing tags",
   "main": "react-tagsinput.js",
   "dependencies": {

diff --git a/react-tagsinput.js b/react-tagsinput.js
@@ -62,6 +62,8 @@
       , onChange: React.PropTypes.func
       , onChangeInput: React.PropTypes.func
       , onBlur: React.PropTypes.func
+      , onKeyDown: React.PropTypes.func
+      , onKeyUp: React.PropTypes.func
       , onTagAdd: React.PropTypes.func
       , onTagRemove: React.PropTypes.func
       , transform: React.PropTypes.func
@@ -80,6 +82,8 @@
         , onChange: function () { }
         , onChangeInput: function () { }
         , onBlur: function () { }
+        , onKeyDown: function () { }
+        , onKeyUp: function () { }
         , onTagAdd: function () { }
         , onTagRemove: function () { }
         , transform: function (tag) { return tag.trim(); }
@@ -222,6 +226,10 @@
       if (remove && this._value().length > 0 && this.state.tag === "") {
         this.removeTag(this._value()[this._value().length - 1]);
       }
+
+      if (!add && !remove) {
+        this.props.onKeyDown(e);
+      }
     }
 
     , onChange: function (e) {
@@ -244,10 +252,20 @@
       this.props.onBlur();
     }
 
+    , clear: function () {
+      this.setState({ tag: "", invalid: false });
+    }
+
     , focus: function () {
       this.refs.input.getDOMNode().focus();
     }
 
+    , handleClick: function (e) {
+      if (e.target === this.getDOMNode()) {
+        this.focus();
+      }
+    }
+
     , render: function() {
       var ns = this.props.classNamespace === "" ? "" : this.props.classNamespace + "-";
 
@@ -263,6 +281,7 @@
       return (
         React.createElement("div", {
           className: ns + "tagsinput"
+          , onClick: this.handleClick
         }, tagNodes, React.createElement(Input, {
           ref: "input"
           , ns: ns
@@ -271,6 +290,7 @@
           , invalid: this.state.invalid
           , validating: this.state.validating
           , onKeyDown: this.onKeyDown
+          , onKeyUp: this.props.onKeyUp
           , onChange: this.onChange
           , onBlur: this.onBlur
         }))

diff --git a/test/index.js b/test/index.js
@@ -43,6 +43,14 @@ describe("TagsInput", function () {
     return component;
   };
 
+  var changeTag = function (tagsinput, tag) {
+    var input = TestUtils.findRenderedDOMComponentWithTag(tagsinput, "input");
+
+    TestUtils.Simulate.change(input, { target: { value: tag } });
+
+    return input;
+  };
+
   var addTag = function (tagsinput, tag, blur) {
     var input = TestUtils.findRenderedDOMComponentWithTag(tagsinput, "input");
 
@@ -251,6 +259,28 @@ describe("TagsInput", function () {
         done()
       }, 100);
     });
+
+    it("should clear tags", function () {
+      var tagsinput = createTagsInput({
+      }).tagsInput();
+
+      var tag = randomString();
+
+      var input = changeTag(tagsinput, tag);
+
+      assert.equal(input.props.value, tag);
+
+      tagsinput.clear();
+
+      assert.equal(input.props.value, "");
+    });
+
+    it("should focus input", function () {
+      var tagsinput = createTagsInput({
+      }).tagsInput();
+
+      TestUtils.Simulate.click(tagsinput.getDOMNode());
+    });
   });
 
   describe("props", function () {
@@ -388,6 +418,38 @@ describe("TagsInput", function () {
       tagsinput.addTag("");
       tagsinput.removeTag("tag1");
     });
+
+    it("test keyUp and keyDown props", function () {
+      var tagsinput = createTagsInput({
+        onKeyDown: function (e) {
+          assert.equal(e.keyCode, 27);
+        }
+        , onKeyUp: function (e) {
+          assert.equal(e.keyCode, 27);
+        }
+      }).tagsInput();
+
+      var tag = randomString();
+
+      var input = addTag(tagsinput, tag);
+
+      TestUtils.Simulate.keyDown(input, {keyCode: 27});
+
+      TestUtils.Simulate.keyUp(input, {keyCode: 27});
+    });
+
+    it("test keyUp and keyDown props", function () {
+      var tagsinput = createTagsInput({
+      }).tagsInput();
+
+      var tag = randomString();
+
+      var input = addTag(tagsinput, tag);
+
+      TestUtils.Simulate.keyDown(input, {keyCode: 27});
+
+      TestUtils.Simulate.keyUp(input, {keyCode: 27});
+    });
   });
 
   describe("bugs", function () {