Skip to content

Commit

Permalink
Fixes issue i-like-robots#87 - delimiters on non US keyboards
Browse files Browse the repository at this point in the history
  • Loading branch information
ajmas committed Aug 10, 2017
1 parent e4006a3 commit 8201a77
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 1 deletion.
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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`.
Expand Down
5 changes: 4 additions & 1 deletion lib/ReactTags.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -191,6 +192,7 @@ ReactTags.defaultProps = {
autofocus: true,
autoresize: true,
delimiters: [KEYS.TAB, KEYS.ENTER],
delimiterChars: [],
minQueryLength: 2,
maxSuggestionsLength: 6,
allowNew: false,
Expand All @@ -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,
Expand Down

0 comments on commit 8201a77

Please sign in to comment.