react-tag-input - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

lib/ReactTags.js

@@ -42,2 +42,3 @@ import React from 'react';
     handleInputChange: React.PropTypes.func,
+    handleInputBlur: React.PropTypes.func,
     minQueryLength: React.PropTypes.number,
@@ -111,2 +112,8 @@ shouldRenderSuggestions: React.PropTypes.func,
   },
+  handleBlur: function(e) {
+    var value = e.target.value.trim();
+    if (this.props.handleInputBlur && value.length){
+      this.props.handleInputBlur(value)
+    }
+  },
   handleKeyDown: function(e) {
@@ -254,2 +261,3 @@ var { query, selectedIndex, suggestions } = this.state;
           aria-label={placeholder}
+          onBlur={this.handleBlur}
           onChange={this.handleChange}
@@ -256,0 +264,0 @@ onKeyDown={this.handleKeyDown}

package.json

 {
   "name": "react-tag-input",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "React tags is a fantastically simple tagging component for your React projects",
@@ -5,0 +5,0 @@ "main": "dist-modules/reactTags.js",

README.md

@@ -109,2 +109,3 @@ React-Tags
 - [`handleInputChange`](#handleInputChange)
+- [`handleInputBlur`](#handleInputBlur)
 - [`minQueryLength`](#minQueryLength)
@@ -217,2 +218,12 @@ - [`removeComponent`](#removeComponent)
 
+<a name="handleInputBlur"></a>
+##### handleInputBlur (optional)
+Optional event handler for input onBlur
+
+```js
+<ReactTags
+    handleInputBlur={this.handleInputBlur}
+    ...>
+```
+
 <a name="minQueryLength"></a>
@@ -219,0 +230,0 @@ ##### minQueryLength (optional)

test/reactTags-test.js

 import React from 'react';
 import { expect } from 'chai';
-import { shallow, mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { spy } from 'sinon';
 import noop from 'lodash/noop';
@@ -31,2 +32,24 @@ import { WithContext as ReactTags } from '../lib/ReactTags';
   });
+
+  it("invokes the onBlur event", () => {
+
+    const handleInputBlur = spy();
+    const $el = mount(mockItem());
+
+    // Won't be invoked as there's no `handleInputBlur` event yet.
+    $el.find('.ReactTags__tagInput input').simulate('blur');
+    expect(handleInputBlur.callCount).to.equal(0);
+
+    // Still won't be invoked, as the input value is empty.
+    $el.setProps({ handleInputBlur });
+    $el.find('.ReactTags__tagInput input').simulate('blur');
+    expect(handleInputBlur.callCount).to.equal(0);
+
+    // Voila...
+    $el.find('.ReactTags__tagInput input').get(0).value = 'Example';
+    $el.find('.ReactTags__tagInput input').simulate('blur');
+    expect(handleInputBlur.callCount).to.equal(1);
+    expect(handleInputBlur.calledWith('Example')).to.be.true;
+
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1069086

increased by0.19%

Lines of code

15370

increased by0.22%

Number of lines in readme file

315

increased by3.62%

No dependency changes