diff --git a/README.md b/README.md index 0cd4927..03d9fed 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,7 @@ React.render(, 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`. diff --git a/lib/ReactTags.js b/lib/ReactTags.js index 40823a0..07093f8 100644 --- a/lib/ReactTags.js +++ b/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,