react-tag-autocomplete - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

dist/ReactTags.js

@@ -45,3 +45,4 @@ 'use strict';
         maxSuggestionsLength: React.PropTypes.number,
-        classNames: React.PropTypes.object
+        classNames: React.PropTypes.object,
+        allowNew: React.PropTypes.bool
     },
@@ -58,3 +59,4 @@
             minQueryLength: 2,
-            maxSuggestionsLength: 6
+            maxSuggestionsLength: 6,
+            allowNew: false
         };
@@ -139,4 +141,15 @@ },
 
-            if (this.state.selectedIndex > -1) {
-                this.addTag(this.state.suggestions[this.state.selectedIndex]);
+            if (query && query.length >= this.props.minQueryLength) {
+                // Check if the user typed in an existing suggestion.
+                var match = suggestions.findIndex(function (suggestion) {
+                    return suggestion.name.search(new RegExp('^' + query + '$', 'i')) === 0;
+                });
+
+                var index = selectedIndex === -1 ? match : selectedIndex;
+
+                if (index > -1) {
+                    this.addTag(suggestions[index]);
+                } else if (this.props.allowNew) {
+                    this.addTag({ name: query });
+                }
             }
@@ -155,9 +168,9 @@ }
             // if last item, cycle to the bottom
-            if (this.state.selectedIndex <= 0) {
+            if (selectedIndex <= 0) {
                 this.setState({
-                    selectedIndex: this.state.suggestions.length - 1
+                    selectedIndex: suggestions.length - 1
                 });
             } else {
                 this.setState({
-                    selectedIndex: this.state.selectedIndex - 1
+                    selectedIndex: selectedIndex - 1
                 });
@@ -172,3 +185,3 @@ }
             this.setState({
-                selectedIndex: (this.state.selectedIndex + 1) % suggestions.length
+                selectedIndex: (selectedIndex + 1) % suggestions.length
             });
@@ -175,0 +188,0 @@ }

lib/ReactTags.js

@@ -40,3 +40,4 @@ const React = require('react');
         maxSuggestionsLength: React.PropTypes.number,
-        classNames: React.PropTypes.object
+        classNames: React.PropTypes.object,
+        allowNew: React.PropTypes.bool
     },
@@ -53,3 +54,4 @@
             minQueryLength: 2,
-            maxSuggestionsLength: 6
+            maxSuggestionsLength: 6,
+            allowNew: false
         };
@@ -126,7 +128,18 @@ },
             if (e.keyCode !== Keys.TAB || query) {
-              e.preventDefault();
+                e.preventDefault();
             }
 
-            if (this.state.selectedIndex > -1) {
-                this.addTag(this.state.suggestions[this.state.selectedIndex]);
+            if (query && query.length >= this.props.minQueryLength) {
+                // Check if the user typed in an existing suggestion.
+                const match = suggestions.findIndex(suggestion => {
+                    return suggestion.name.search(new RegExp(`^${query}$`, 'i')) === 0;
+                });
+
+                const index = selectedIndex === -1 ? match : selectedIndex;
+
+                if (index > -1) {
+                    this.addTag(suggestions[index]);
+                } else if (this.props.allowNew) {
+                    this.addTag({ name: query });
+                }
             }
@@ -145,9 +158,9 @@ }
             // if last item, cycle to the bottom
-            if (this.state.selectedIndex <= 0) {
+            if (selectedIndex <= 0) {
                 this.setState({
-                    selectedIndex: this.state.suggestions.length - 1
+                    selectedIndex: suggestions.length - 1
                 });
             } else {
                 this.setState({
-                    selectedIndex: this.state.selectedIndex - 1
+                    selectedIndex: selectedIndex - 1
                 });
@@ -162,3 +175,3 @@ }
             this.setState({
-                selectedIndex: (this.state.selectedIndex + 1) % suggestions.length
+                selectedIndex: (selectedIndex + 1) % suggestions.length
             });
@@ -165,0 +178,0 @@ }

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -21,3 +21,4 @@ "main": "dist/ReactTags.js",
     "Prakhar Srivastav",
-    "Matt Hinchliffe"
+    "Matt Hinchliffe",
+    "Simon Hötten"
   ],
@@ -24,0 +25,0 @@ "license": "MIT",

README.md

@@ -78,2 +78,3 @@ # React Tag Autocomplete
 - [`handleInputChange`](#handleInputChange)
+- [`allowNew`](#allowNew)
 
@@ -197,2 +198,16 @@ <a name="tagsOption"></a>
 
+<a name="allowNew"></a>
+#### allowNew (optional)
+
+Allows users to add new (not suggested) tags. Default: `false`.
+
+To enable it, just add `allowNew` as a component property:
+
+```js
+<ReactTags
+    handleDelete={this.handleDelete}
+    handleAddition={this.handleAddition}
+    allowNew />
+```
+
 ### Styling
@@ -199,0 +214,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1770909

increased by0.15%

Lines of code

1417

increased by1.58%

Number of lines in readme file

227

increased by7.08%

No dependency changes