react-tagsinput - npm Package Compare versions

Comparing version 3.15.1 to 3.16.0

bower.json

@@ -7,3 +7,3 @@ {
   ],
-  "version": "3.15.1",
+  "version": "3.16.0",
   "homepage": "https://github.com/olahol/react-tagsinput",
@@ -10,0 +10,0 @@ "description": "Highly customizable React component for inputing tags",

CHANGELOG.md

@@ -0,1 +1,5 @@
+### 3.16.0 (2017-04-09)
+
+* Add `preventSubmit`.
+
 ### 3.15.0 (2017-02-12)
@@ -2,0 +6,0 @@

CONTRIBUTORS.md

@@ -34,1 +34,2 @@ * Ola Holmström (@olahol)
 * Jonas Reitmann (@jonicious)
+* Ryan Hyslop (@ryanhyslop)

package.json

 {
   "name": "react-tagsinput",
-  "version": "3.15.1",
+  "version": "3.16.0",
   "description": "Highly customizable React component for inputing tags",
@@ -28,2 +28,3 @@ "main": "react-tagsinput.js",
     "reactpack": "^0.9.0",
+    "sinon": "^2.1.0",
     "standard": "^8.6.0"
@@ -30,0 +31,0 @@ },

react-tagsinput.js

@@ -333,2 +333,15 @@ (function (global, factory) {
     }, {
+      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',
@@ -416,4 +429,3 @@ value: function focus() {
           var added = this.accept();
-          // Special case for preventing forms submitting.
-          if (added || keyCode === 13) {
+          if (this._shouldPreventDefaultEventOnAdd(added, empty, keyCode)) {
             e.preventDefault();
@@ -638,3 +650,4 @@ }
     disabled: _react2.default.PropTypes.bool,
-    tagDisplayProp: _react2.default.PropTypes.string
+    tagDisplayProp: _react2.default.PropTypes.string,
+    preventSubmit: _react2.default.PropTypes.bool
   };
@@ -658,3 +671,4 @@ TagsInput.defaultProps = {
     disabled: false,
-    tagDisplayProp: null
+    tagDisplayProp: null,
+    preventSubmit: true
   };
@@ -661,0 +675,0 @@ exports.default = TagsInput;

README.md

@@ -47,2 +47,3 @@ # react-tagsinput
         * [renderLayout](#renderlayout)
+        * [preventSubmit](#preventSubmit)
       * [Methods](#methods)
@@ -369,2 +370,9 @@ * [focus()](#focus)
 
+##### 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
@@ -371,0 +379,0 @@

src/index.js

@@ -108,3 +108,4 @@ import React from 'react'
     disabled: React.PropTypes.bool,
-    tagDisplayProp: React.PropTypes.string
+    tagDisplayProp: React.PropTypes.string,
+    preventSubmit: React.PropTypes.bool
   }
@@ -129,3 +130,4 @@
     disabled: false,
-    tagDisplayProp: null
+    tagDisplayProp: null,
+    preventSubmit: true
   }
@@ -224,2 +226,14 @@
 
+  _shouldPreventDefaultEventOnAdd (added, empty, keyCode) {
+    if (added) {
+      return true
+    }
+
+    if (keyCode === 13) {
+      return (this.props.preventSubmit || !this.props.preventSubmit && !empty)
+    }
+
+    return false
+  }
+
   focus () {
@@ -289,4 +303,3 @@ if (this.refs.input && typeof this.refs.input.focus === 'function') {
       let added = this.accept()
-      // Special case for preventing forms submitting.
-      if (added || keyCode === 13) {
+      if (this._shouldPreventDefaultEventOnAdd(added, empty, keyCode)) {
         e.preventDefault()
@@ -293,0 +306,0 @@ }

test/index.js

@@ -11,2 +11,3 @@ const jsdom = require("jsdom");
 const assert = require("assert");
+const sinon = require('sinon');
 
@@ -516,2 +517,3 @@ class TestComponent extends React.Component {
 
+
     it("should disable input when component is disabled", () => {
@@ -521,2 +523,58 @@ let comp = TestUtils.renderIntoDocument(<TestComponent disabled={true} />);
     });
+
+    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");
+        });
+      });
+    });
+
   });
@@ -523,0 +581,0 @@

No alert changes

Improved metrics

Total package byte prevSize

76295

increased by4.59%

Lines of code

1640

increased by4.06%

Number of lines in readme file

428

increased by1.9%

Worsened metrics

Dev dependency count

20

increased by5.26%

Number of package files

16

decreased by-5.88%

No dependency changes