react-tag-autocomplete - npm Package Compare versions

Comparing version 5.6.0 to 5.7.0

CHANGELOG.md

 # Changelog
 
+## 5.7.0
+
+- Added `addOnBlur` option ([APILLSBURY](https://github.com/APILLSBURY) and [jedrzejiwanicki](https://github.com/jedrzejiwanicki))
+
 ## 5.6.0
@@ -4,0 +8,0 @@

dist-es5/ReactTags.js

@@ -77,16 +77,3 @@ 'use strict'
 
-      if (query.length >= this.props.minQueryLength) {
-        // Check if the user typed in an existing suggestion.
-        var match = this.suggestions.state.options.findIndex(function (suggestion) {
-          return suggestion.name.search(new RegExp(("^" + query + "$"), 'i')) === 0
-        })
-
-        var index = selectedIndex === -1 ? match : selectedIndex
-
-        if (index > -1) {
-          this.addTag(this.suggestions.state.options[index])
-        } else if (this.props.allowNew) {
-          this.addTag({ name: query })
-        }
-      }
+      this.handleDelimiter()
     }
@@ -117,2 +104,23 @@
 
+  ReactTags.prototype.handleDelimiter = function handleDelimiter () {
+    var ref = this.state;
+    var query = ref.query;
+    var selectedIndex = ref.selectedIndex;
+
+    if (query.length >= this.props.minQueryLength) {
+      // Check if the user typed in an existing suggestion.
+      var match = this.suggestions.state.options.findIndex(function (suggestion) {
+        return suggestion.name.search(new RegExp(("^" + query + "$"), 'i')) === 0
+      })
+
+      var index = selectedIndex === -1 ? match : selectedIndex
+
+      if (index > -1) {
+        this.addTag(this.suggestions.state.options[index])
+      } else if (this.props.allowNew) {
+        this.addTag({ name: query })
+      }
+    }
+  };
+
   ReactTags.prototype.handleClick = function handleClick (e) {
@@ -130,2 +138,6 @@ if (document.activeElement !== e.target) {
     }
+
+    if (this.props.addOnBlur) {
+      this.handleDelimiter()
+    }
   };
@@ -207,3 +219,4 @@
   tagComponent: null,
-  inputAttributes: {}
+  inputAttributes: {},
+  addOnBlur: false
 }
@@ -233,5 +246,6 @@
   ]),
-  inputAttributes: PropTypes.object
+  inputAttributes: PropTypes.object,
+  addOnBlur: PropTypes.bool
 }
 
 module.exports = ReactTags

dist-es6/ReactTags.js

@@ -69,16 +69,3 @@ 'use strict'
 
-      if (query.length >= this.props.minQueryLength) {
-        // Check if the user typed in an existing suggestion.
-        const match = this.suggestions.state.options.findIndex((suggestion) => {
-          return suggestion.name.search(new RegExp(`^${query}$`, 'i')) === 0
-        })
-
-        const index = selectedIndex === -1 ? match : selectedIndex
-
-        if (index > -1) {
-          this.addTag(this.suggestions.state.options[index])
-        } else if (this.props.allowNew) {
-          this.addTag({ name: query })
-        }
-      }
+      this.handleDelimiter()
     }
@@ -109,2 +96,21 @@
 
+  handleDelimiter () {
+    const { query, selectedIndex } = this.state
+
+    if (query.length >= this.props.minQueryLength) {
+      // Check if the user typed in an existing suggestion.
+      const match = this.suggestions.state.options.findIndex((suggestion) => {
+        return suggestion.name.search(new RegExp(`^${query}$`, 'i')) === 0
+      })
+
+      const index = selectedIndex === -1 ? match : selectedIndex
+
+      if (index > -1) {
+        this.addTag(this.suggestions.state.options[index])
+      } else if (this.props.allowNew) {
+        this.addTag({ name: query })
+      }
+    }
+  }
+
   handleClick (e) {
@@ -122,2 +128,6 @@ if (document.activeElement !== e.target) {
     }
+
+    if (this.props.addOnBlur) {
+      this.handleDelimiter()
+    }
   }
@@ -195,3 +205,4 @@
   tagComponent: null,
-  inputAttributes: {}
+  inputAttributes: {},
+  addOnBlur: false
 }
@@ -221,5 +232,6 @@
   ]),
-  inputAttributes: PropTypes.object
+  inputAttributes: PropTypes.object,
+  addOnBlur: PropTypes.bool
 }
 
 module.exports = ReactTags

lib/ReactTags.js

@@ -69,16 +69,3 @@ 'use strict'
 
-      if (query.length >= this.props.minQueryLength) {
-        // Check if the user typed in an existing suggestion.
-        const match = this.suggestions.state.options.findIndex((suggestion) => {
-          return suggestion.name.search(new RegExp(`^${query}$`, 'i')) === 0
-        })
-
-        const index = selectedIndex === -1 ? match : selectedIndex
-
-        if (index > -1) {
-          this.addTag(this.suggestions.state.options[index])
-        } else if (this.props.allowNew) {
-          this.addTag({ name: query })
-        }
-      }
+      this.handleDelimiter()
     }
@@ -109,2 +96,21 @@
 
+  handleDelimiter () {
+    const { query, selectedIndex } = this.state
+
+    if (query.length >= this.props.minQueryLength) {
+      // Check if the user typed in an existing suggestion.
+      const match = this.suggestions.state.options.findIndex((suggestion) => {
+        return suggestion.name.search(new RegExp(`^${query}$`, 'i')) === 0
+      })
+
+      const index = selectedIndex === -1 ? match : selectedIndex
+
+      if (index > -1) {
+        this.addTag(this.suggestions.state.options[index])
+      } else if (this.props.allowNew) {
+        this.addTag({ name: query })
+      }
+    }
+  }
+
   handleClick (e) {
@@ -122,2 +128,6 @@ if (document.activeElement !== e.target) {
     }
+
+    if (this.props.addOnBlur) {
+      this.handleDelimiter()
+    }
   }
@@ -215,3 +225,4 @@
   tagComponent: null,
-  inputAttributes: {}
+  inputAttributes: {},
+  addOnBlur: false
 }
@@ -241,5 +252,6 @@
   ]),
-  inputAttributes: PropTypes.object
+  inputAttributes: PropTypes.object,
+  addOnBlur: PropTypes.bool
 }
 
 module.exports = ReactTags

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -12,4 +12,4 @@ "main": "dist-es5/ReactTags.js",
     "lint": "standard lib/*.js spec/*.js",
-    "dev": "webpack-dev-server --progress --colors --port ${PORT:-8080} --host 0.0.0.0",
-    "build:example": "webpack -p --config-name example",
+    "dev": "webpack-dev-server --progress --env.NODE_ENV=development",
+    "build:example": "webpack -p --env.NODE_ENV=production --config-name example",
     "build:es5": "buble lib --objectAssign -o dist-es5",
@@ -40,3 +40,5 @@ "build:es6": "buble lib --objectAssign -o dist-es6 -t node:6",
     "Andre-John Mas",
-    "Mike Kamermans"
+    "Mike Kamermans",
+    "Juliette Prétot",
+    "Andrew Pillsbury"
   ],
@@ -59,4 +61,4 @@ "license": "MIT",
     "prop-types": "^15.5.0",
-    "react": "^15.5.0",
-    "react-dom": "^15.5.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "sinon": "^4.0.0",
@@ -63,0 +65,0 @@ "standard": "^10.0.3",

README.md

@@ -85,2 +85,3 @@ # React Tag Autocomplete
 - [`handleBlur`](#handleblur-optional)
+- [`addOnBlur`](#addonblur-optional)
 - [`allowNew`](#allownew-optional)
@@ -207,2 +208,6 @@ - [`tagComponent`](#tagcomponent-optional)
 
+#### addOnBlur (optional)
+
+Creates a tag from the current input value when focus on the input is lost. Default: `false`.
+
 #### allowNew (optional)
@@ -209,0 +214,0 @@

No alert changes

Improved metrics

Number of package files

26

increased by18.18%

Number of lines in readme file

271

increased by1.88%

Worsened metrics

Total package byte prevSize

460774

decreased by-23.66%

Lines of code

1657

decreased by-0.18%

No dependency changes