Match on key as well as keyCode

Author: Thomas Levy

react-tagsinput.js

@@ -411,8 +411,9 @@
         var tag = this._tag();
         var empty = tag === '';
         var keyCode = e.keyCode;
-        var add = addKeys.indexOf(keyCode) !== -1;
-        var remove = removeKeys.indexOf(keyCode) !== -1;
+        var key = e.key;
+        var add = addKeys.indexOf(keyCode) !== -1 || addKeys.indexOf(key) !== -1;
+        var remove = removeKeys.indexOf(keyCode) !== -1 || removeKeys.indexOf(key) !== -1;
 
         if (add) {
           var added = this.accept();

src/index.js

@@ -87,15 +87,21 @@ class TagsInput extends React.Component {
 
   static propTypes = {
     focusedClassName: React.PropTypes.string,
-    addKeys: React.PropTypes.array,
+    addKeys: React.PropTypes.arrayOf(React.Proptypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ])),
     addOnBlur: React.PropTypes.bool,
     addOnPaste: React.PropTypes.bool,
     currentValue: React.PropTypes.string,
     inputValue: React.PropTypes.string,
     inputProps: React.PropTypes.object,
     onChange: React.PropTypes.func.isRequired,
     onChangeInput: React.PropTypes.func,
-    removeKeys: React.PropTypes.array,
+    removeKeys: React.PropTypes.arrayOf(React.Proptypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ])),
     renderInput: React.PropTypes.func,
     renderTag: React.PropTypes.func,
     renderLayout: React.PropTypes.func,
@@ -297,8 +303,9 @@ class TagsInput extends React.Component {
     const tag = this._tag()
     let empty = tag === ''
     let keyCode = e.keyCode
-    let add = addKeys.indexOf(keyCode) !== -1
-    let remove = removeKeys.indexOf(keyCode) !== -1
+    let key = e.key
+    let add = addKeys.indexOf(keyCode) !== -1 || addKeys.indexOf(key) !== -1
+    let remove = removeKeys.indexOf(keyCode) !== -1 || removeKeys.indexOf(key) !== -1
 
     if (add) {
       let added = this.accept()

test/index.js

@@ -68,8 +68,8 @@ function paste(comp, value) {
   });
 }
 
-function keyDown(comp, code) {
-  TestUtils.Simulate.keyDown(comp.input(), {keyCode: code});
+function keyDown(comp, code, key) {
+  TestUtils.Simulate.keyDown(comp.input(), {keyCode: code, key: key});
 }
 
 function blur(comp) {
@@ -277,6 +277,16 @@ describe("TagsInput", () => {
       assert.equal(comp.tag(0), tag, "it should be the tag that was added");
     });
 
+    it("should add a tag on key `,`", () => {
+      let comp = TestUtils.renderIntoDocument(<TestComponent addKeys={[","]} />);
+      let tag = randstring();
+
+      change(comp, tag);
+      keyDown(comp, null, ",");
+      assert.equal(comp.len(), 1, "there should be one tag");
+      assert.equal(comp.tag(0), tag, "it should be the tag that was added");
+    });
+
     it("should add a tag on blur, if `this.props.addOnBlur` is true", () => {
       let comp = TestUtils.renderIntoDocument(<TestComponent addOnBlur={true} />);
       let tag = randstring();
@@ -318,6 +328,16 @@ describe("TagsInput", () => {
       assert.equal(comp.len(), 0, "there should be no tags");
     });
 
+    it("should remove a tag on key `,`", () => {
+      let comp = TestUtils.renderIntoDocument(<TestComponent removeKeys={[","]} />);
+      let tag = randstring();
+
+      add(comp, tag);
+      assert.equal(comp.len(), 1, "there should be one tag");
+      keyDown(comp, null, ",");
+      assert.equal(comp.len(), 0, "there should be no tags");
+    });
+
     it("should be unlimited tags", () => {
         let comp = TestUtils.renderIntoDocument(<TestComponent maxTags={-1} />);
         let tag = randstring();