Added preventSubmit prop to allow for submiting a form when pressing return with no tags

Author: ryanhyslop

README.md

@@ -44,6 +44,7 @@ Highly customizable [React](http://facebook.github.io/react/index.html) componen
         * [renderTag](#rendertag)
         * [renderInput](#renderinput)
         * [renderLayout](#renderlayout)
+        * [preventSubmit](#preventSubmit)
       * [Methods](#methods)
         * [focus()](#focus)
         * [blur()](#blur)
@@ -365,6 +366,13 @@ function defaultRenderLayout (tagComponents, inputComponent) {
 }
 ```
 
+##### preventSubmit
+
+A `boolean` to prevent the default submit event when adding an 'empty' tag.
+Default: `true`
+
+Set to `false` if you want the default submit to fire when pressing enter again after adding a tag.
+
 ### Methods
 
 ##### focus()

package.json

@@ -25,6 +25,7 @@
     "react-dom": "15.x.x",
     "react-input-autosize": "^1.0.0",
     "reactpack": "^0.9.0",
+    "sinon": "^2.1.0",
     "standard": "^8.6.0"
   },
   "scripts": {

react-tagsinput.js

@@ -330,6 +330,19 @@
         return false;
       }
     }, {
+      key: '_shouldPreventDefaultEventOnAdd',
+      value: function _shouldPreventDefaultEventOnAdd(added, empty, keyCode) {
+        if (added) {
+          return true;
+        }
+
+        if (keyCode === 13) {
+          return this.props.preventSubmit || !this.props.preventSubmit && !empty;
+        }
+
+        return false;
+      }
+    }, {
       key: 'focus',
       value: function focus() {
         if (this.refs.input && typeof this.refs.input.focus === 'function') {
@@ -412,8 +425,7 @@
 
         if (add) {
           var added = this.accept();
-          // Special case for preventing forms submitting.
-          if (added || keyCode === 13) {
+          if (this._shouldPreventDefaultEventOnAdd(added, empty, keyCode)) {
             e.preventDefault();
           }
         }
@@ -633,7 +645,8 @@
     maxTags: _react2.default.PropTypes.number,
     validationRegex: _react2.default.PropTypes.instanceOf(RegExp),
     disabled: _react2.default.PropTypes.bool,
-    tagDisplayProp: _react2.default.PropTypes.string
+    tagDisplayProp: _react2.default.PropTypes.string,
+    preventSubmit: _react2.default.PropTypes.bool
   };
   TagsInput.defaultProps = {
     className: 'react-tagsinput',
@@ -652,7 +665,8 @@
     maxTags: -1,
     validationRegex: /.*/,
     disabled: false,
-    tagDisplayProp: null
+    tagDisplayProp: null,
+    preventSubmit: true
   };
   exports.default = TagsInput;
   module.exports = exports['default'];

src/index.js

@@ -105,7 +105,8 @@ class TagsInput extends React.Component {
     maxTags: React.PropTypes.number,
     validationRegex: React.PropTypes.instanceOf(RegExp),
     disabled: React.PropTypes.bool,
-    tagDisplayProp: React.PropTypes.string
+    tagDisplayProp: React.PropTypes.string,
+    preventSubmit: React.PropTypes.bool
   }
 
   static defaultProps = {
@@ -125,7 +126,8 @@ class TagsInput extends React.Component {
     maxTags: -1,
     validationRegex: /.*/,
     disabled: false,
-    tagDisplayProp: null
+    tagDisplayProp: null,
+    preventSubmit: true
   }
 
   _getTagDisplayValue (tag) {
@@ -219,6 +221,18 @@ class TagsInput extends React.Component {
     return false
   }
 
+  _shouldPreventDefaultEventOnAdd (added, empty, keyCode) {
+    if (added) {
+      return true
+    }
+
+    if (keyCode === 13) {
+      return (this.props.preventSubmit || !this.props.preventSubmit && !empty)
+    }
+
+    return false
+  }
+
   focus () {
     if (this.refs.input && typeof this.refs.input.focus === 'function') {
       this.refs.input.focus()
@@ -283,8 +297,7 @@ class TagsInput extends React.Component {
 
     if (add) {
       let added = this.accept()
-      // Special case for preventing forms submitting.
-      if (added || keyCode === 13) {
+      if (this._shouldPreventDefaultEventOnAdd(added, empty, keyCode)) {
         e.preventDefault()
       }
     }

test/index.js

@@ -8,6 +8,7 @@ const TagsInput = require("../src");
 const React = require("react");
 const TestUtils = require("react-addons-test-utils");
 const assert = require("assert");
+const sinon = require('sinon');
 
 class TestComponent extends React.Component {
   constructor() {
@@ -512,10 +513,67 @@ describe("TagsInput", () => {
       remove(comp);
     });
 
+
     it("should disable input when component is disabled", () => {
       let comp = TestUtils.renderIntoDocument(<TestComponent disabled={true} />);
       assert.ok(comp.tagsinput().refs.input.disabled, "input should be disabled");
     });
+
+    describe('preventSubmit', () => {
+
+      function addTagWithEventSpy(comp, tag, preventDefaultSpy) {
+        change(comp, tag);
+        TestUtils.Simulate.keyDown(comp.input(), { keyCode: 13, preventDefault: preventDefaultSpy });
+      }
+
+      describe("when to to true", () => {
+        it("should prevent default submit event on enter key when adding a tag ", () => {
+          let comp = TestUtils.renderIntoDocument(<TestComponent preventSubmit={true} />);
+          const preventDefault = sinon.spy();
+
+          addTagWithEventSpy(comp, "Tag", preventDefault);
+          assert.equal(preventDefault.called, true, "preventDefault was not called when it should be");
+        });
+
+        it("should prevent default submit on enter key when tag is empty when prop is true", () => {
+          let comp = TestUtils.renderIntoDocument(<TestComponent preventSubmit={true} />);
+          const preventDefault = sinon.spy();
+
+          addTagWithEventSpy(comp, "", preventDefault);
+          assert.equal(preventDefault.called, true, "preventDefault was not called when it should be");
+        });
+
+      });
+
+      describe("when set to false", () => {
+        it("should not prevent default submit on enter key when tag is empty", () => {
+          let comp = TestUtils.renderIntoDocument(<TestComponent preventSubmit={false} />);
+          const preventDefault = sinon.spy();
+
+          addTagWithEventSpy(comp, "", preventDefault);
+          assert.equal(preventDefault.called, false, "preventDefault was called when it should not be");
+        });
+
+        it("should still prevent default submit on enter key when tag is not empty and added", () => {
+          let comp = TestUtils.renderIntoDocument(<TestComponent preventSubmit={false} />);
+          const preventDefault = sinon.spy();
+
+          addTagWithEventSpy(comp, "A tag", preventDefault);
+          assert.equal(preventDefault.called, true, "preventDefault was not called when it should have been");
+        });
+
+        it("should still prevent default submit event if a tag is rejected (unique etc..)", () => {
+          let comp = TestUtils.renderIntoDocument(<TestComponent preventSubmit={false} onlyUnique={true} />);
+          const preventDefault = sinon.spy();
+
+          add(comp, "Tag", 13);
+          addTagWithEventSpy(comp, "Tag", preventDefault);
+
+          assert.equal(preventDefault.called, true, "preventDefault was not called when it should have been");
+        });
+      });
+    });
+
   });
 
   describe("methods", () => {