fixes issue i-like-robots#84, for pasting with delimiters

lib/ReactTags.js

@@ -56,6 +56,42 @@ class ReactTags extends React.Component {
  this.setState({ query })
  }
 
+ handlePaste (e) {
+ // allow over-ride, if there is a need
+ if (this.props.onPaste) {
+ return this.props.onPaste(e);
+ }
+
+ const { delimiters, delimiterChars } = this.props
+
+ e.preventDefault()
+
+ // get the text data from the clipboard
+ const data = e.clipboardData.getData('Text')
+
+ if (data && delimiterChars.length > 0) {
+ // split the string based on the delimiterChars as a regex
+ const tags = data.split(new RegExp(delimiterChars.join('|'), 'g'));
+ for (let i=0; i < tags.length; i++) {
+ // the logic here is similar to handleKeyDown, but subtly different, 
+ // due to the context of the operation
+ if (tags[i].length > 0) {
+ // look to see if the tag is already known
+ const matchIdx = this.suggestions.state.options.findIndex((suggestion) => {
+ return tags[i] === suggestion.name
+ })
+
+ // if already known add it, otherwise add it only if we allow new tags
+ if (matchIdx > -1) {
+ this.addTag(this.suggestions.state.options[matchIdx])
+ } else if (this.props.allowNew) {
+ this.addTag({ name: tags[i] })
+ }
+ }
+ } 
+ }
+ }
+
  handleKeyDown (e) {
  const { query, selectedIndex } = this.state
  const { delimiters, delimiterChars } = this.props
@@ -166,14 +202,16 @@ class ReactTags extends React.Component {
  onBlur={this.handleBlur.bind(this)}
  onFocus={this.handleFocus.bind(this)}
  onChange={this.handleChange.bind(this)}
- onKeyDown={this.handleKeyDown.bind(this)}>
+ onKeyDown={this.handleKeyDown.bind(this)}
+ onPaste={this.handlePaste.bind(this)} >
  <Input {...this.state}
  ref={(c) => { this.input = c }}
  listboxId={listboxId}
  autofocus={this.props.autofocus}
  autoresize={this.props.autoresize}
  expandable={expandable}
- placeholder={this.props.placeholder} />
+ placeholder={this.props.placeholder}
+ />
  <Suggestions {...this.state}
  ref={(c) => { this.suggestions = c }}
  listboxId={listboxId}