Merge pull request #88 from ajmas/issue-87-delimeters-non-us-keyboards

Fixes issue #87 - delimiters on non US keyboards

Author: i-like-robots

README.md

@@ -73,6 +73,7 @@ React.render(<App />, document.getElementById('app'))
 - [`autofocus`](#autofocus-optional)
 - [`autoresize`](#autoresize-optional)
 - [`delimiters`](#delimiters-optional)
+- [`delimiterChars`](#delimitersChars-optional)
 - [`minQueryLength`](#minquerylength-optional)
 - [`maxSuggestionsLength`](#maxsuggestionslength-optional)
 - [`classNames`](#classnames-optional)
@@ -122,6 +123,10 @@ Boolean parameter to control whether the text-input should be automatically resi
 
 Array of integers matching keyboard event `keyCode` values. When a corresponding key is pressed, the preceding string is finalised as tag. Default: `[8, 13]`.
 
+#### delimtersChars (optional)
+
+Array of characters matching keyboard event `key` values. This is useful when needing to support a specific character irrespective of the keyboard layout. Note, that this list is separate from the one specified by the `delimeters` option, so you'll need to set the value there to `[]`, if you wish to disable those keys. Example usage: `delimeterChars={[',', ' ']}`. Default: `[]`
+
 #### minQueryLength (optional)
 
 How many characters are needed for suggestions to appear. Default: `2`.

lib/ReactTags.js

@@ -58,9 +58,10 @@ class ReactTags extends React.Component {
 
   handleKeyDown (e) {
     const { query, selectedIndex } = this.state
+    const { delimiters, delimiterChars } = this.props
 
     // when one of the terminating keys is pressed, add current query to the tags.
-    if (this.props.delimiters.indexOf(e.keyCode) !== -1) {
+    if (delimiters.indexOf(e.keyCode) !== -1 || delimiterChars.indexOf(e.key) !== -1) {
       (query || selectedIndex > -1) && e.preventDefault()
 
       if (query.length >= this.props.minQueryLength) {
@@ -191,6 +192,7 @@ ReactTags.defaultProps = {
   autofocus: true,
   autoresize: true,
   delimiters: [KEYS.TAB, KEYS.ENTER],
+  delimiterChars: [],
   minQueryLength: 2,
   maxSuggestionsLength: 6,
   allowNew: false,
@@ -205,6 +207,7 @@ ReactTags.propTypes = {
   autofocus: PropTypes.bool,
   autoresize: PropTypes.bool,
   delimiters: PropTypes.arrayOf(PropTypes.number),
+  delimiterChars: PropTypes.arrayOf(PropTypes.string),
   handleDelete: PropTypes.func.isRequired,
   handleAddition: PropTypes.func.isRequired,
   handleInputChange: PropTypes.func,