fixes issue #84, for pasting with delimiters

README.md

@@ -125,7 +125,7 @@ Array of integers matching keyboard event `keyCode` values. When a corresponding
 
 #### delimiterChars (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 `delimiters` option, so you'll need to set the value there to `[]`, if you wish to disable those keys. Example usage: `delimiterChars={[',', ' ']}`. Default: `[]`
+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 `delimiters` option, so you'll need to set the value there to `[]`, if you wish to disable those keys. Note, that specifying delimiters longer than one character is only supported for paste operations. Example usage: `delimiterChars={[',', ' ']}`. Default: `['\t', '\r\n', '\r', '\n']`
 
 #### minQueryLength (optional)
 

example/main.js

@@ -33,10 +33,12 @@ class App extends React.Component {
     return (
       <div>
         <Tags
+          delimiterChars={[',', ' ', '\t']}
           tags={this.state.tags}
           suggestions={this.state.suggestions}
           handleDelete={this.handleDelete.bind(this)}
-          handleAddition={this.handleAddition.bind(this)} />
+          handleAddition={this.handleAddition.bind(this)}          
+        />
         <hr />
         <pre><code>{JSON.stringify(this.state.tags, null, 2)}</code></pre>
       </div>

lib/ReactTags.js

@@ -46,6 +46,10 @@ class ReactTags extends React.Component {
     })
   }
 
+  escapeForRegExp (query) {
+    return query.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
+  }
+
   handleChange (e) {
     const query = e.target.value
 
@@ -56,6 +60,47 @@ class ReactTags extends React.Component {
     this.setState({ query })
   }
 
+  handlePaste (e) {
+    // allow over-ride, if there is a need
+    if (this.props.handlePaste) {
+      return this.props.handlePaste(e)
+    }
+
+    const { 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, being sure
+      // to escape chars, to prevent them being treated as special characters
+      const tags = data.split(new RegExp('[' + this.escapeForRegExp(delimiterChars.join('')) + ']'))
+      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.props.suggestions.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.props.suggestions[matchIdx])
+          } else if (this.props.allowNew) {
+            this.addTag({ name: tags[i] })
+          }
+        }
+      }
+    } else if (!delimiterChars || delimiterChars.length === 0) {
+      if (console) {
+        console.warn('no delimiterChars specified, so ignoring paste operation')
+      }
+    }
+  }
+
   handleKeyDown (e) {
     const { query, selectedIndex } = this.state
     const { delimiters, delimiterChars } = this.props
@@ -166,14 +211,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}
@@ -194,7 +241,7 @@ ReactTags.defaultProps = {
   autofocus: true,
   autoresize: true,
   delimiters: [KEYS.TAB, KEYS.ENTER],
-  delimiterChars: [],
+  delimiterChars: ['\t', '\r\n', '\r', '\n'],
   minQueryLength: 2,
   maxSuggestionsLength: 6,
   allowNew: false,
@@ -213,6 +260,7 @@ ReactTags.propTypes = {
   handleDelete: PropTypes.func.isRequired,
   handleAddition: PropTypes.func.isRequired,
   handleInputChange: PropTypes.func,
+  handlePaste: PropTypes.func,
   minQueryLength: PropTypes.number,
   maxSuggestionsLength: PropTypes.number,
   classNames: PropTypes.object,

spec/ReactTags.spec.js

@@ -64,6 +64,10 @@ function click (target) {
   TestUtils.Simulate.click(target)
 }
 
+function paste (target, eventData) {
+  TestUtils.Simulate.paste(target, eventData)
+}
+
 describe('React Tags', () => {
   afterEach(() => {
     teardownInstance()
@@ -371,6 +375,100 @@ describe('React Tags', () => {
 
       expect($$('.custom-tag').length).toEqual(2)
     })
+
+    it('can receive tags through paste, respecting default delimiter chars', () => {
+      // The large range of delimiterChars in the test is to ensure
+      // they don't take on new meaning when used as part of a regex.
+      // Also ensure we accept multicharacter separators, in this scenario
+      createInstance({
+        allowNew: true
+      })
+
+      paste($('input'), { clipboardData: {
+        types: ['text/plain', 'Text'],
+        getData: (type) => 'foo\tbar\r\nbaz\rfam\nbam'
+      }})
+
+      sinon.assert.callCount(props.handleAddition, 5)
+    })
+
+    it('can receive tags through paste, respecting delimiter chars', () => {
+      // The large range of delimiterChars in the test is to ensure
+      // they don't take on new meaning when used as part of a regex.
+      // Also ensure we accept multicharacter separators, in this scenario
+      createInstance({
+        allowNew: true,
+        delimiterChars: ['^', ',', ';', '.', '\\', '[', ']X'],
+        suggestions: [{ id: 1, name: 'foo' }]
+      })
+
+      paste($('input'), { clipboardData: {
+        types: ['text/plain', 'Text'],
+        getData: (type) => 'foo,bar;baz^fam\\bam[moo]Xark'
+      }})
+
+      sinon.assert.callCount(props.handleAddition, 7)
+    })
+
+    it('ignores paste operation, if no delimiterChars are specified', () => {
+      // The large range of delimiterChars in the test is to ensure
+      // they don't take on new meaning when used as part of a regex.
+      // Also ensure we accept multicharacter separators, in this scenario
+      createInstance({
+        allowNew: true,
+        delimiterChars: []
+      })
+
+      paste($('input'), { clipboardData: {
+        types: ['text/plain', 'Text'],
+        getData: (type) => 'foo\tbar\r\nbaz\rfam\nbam'
+      }})
+
+      sinon.assert.callCount(props.handleAddition, 0)
+    })
+
+    it('can receive tags through paste, ignoring new tags', () => {
+      createInstance({
+        allowNew: false,
+        delimiterChars: [','],
+        suggestions: [{ id: 1, name: 'foo' }]
+      })
+
+      paste($('input'), { clipboardData: {
+        types: ['text/plain', 'Text'],
+        getData: (type) => 'foo,bar'
+      }})
+
+      sinon.assert.callCount(props.handleAddition, 1)
+    })
+
+    it('accepts no paste, if there are not delimiterChars', () => {
+      createInstance({
+        allowNew: true,
+        delimiterChars: []
+      })
+
+      paste($('input'), { clipboardData: {
+        types: ['text/plain', 'Text'],
+        getData: (type) => 'foo,bar;baz'
+      }})
+
+      sinon.assert.callCount(props.handleAddition, 0)
+    })
+
+    it('adds no tags, if the pasted string is empty', () => {
+      createInstance({
+        allowNew: true,
+        delimiterChars: [',']
+      })
+
+      paste($('input'), { clipboardData: {
+        types: ['text/plain', 'Text'],
+        getData: (type) => ''
+      }})
+
+      sinon.assert.callCount(props.handleAddition, 0)
+    })
   })
 
   describe('sizer', () => {
@@ -435,4 +533,23 @@ describe('React Tags', () => {
       expect(input.style.width).toBeFalsy()
     })
   })
+
+  describe('event override', () => {
+    it('can receive tags through paste, respecting delimiters', () => {
+      createInstance({
+        allowNew: true,
+        delimiterChars: [','],
+        handlePaste: (e) => {
+          e.preventDefault()
+        }
+      })
+
+      paste($('input'), { clipboardData: {
+        types: ['text/plain', 'Text'],
+        getData: (type) => 'foo,bar;baz'
+      }})
+
+      sinon.assert.callCount(props.handleAddition, 0)
+    })
+  })
 })

webpack.config.js

@@ -16,6 +16,13 @@ module.exports = {
   output: {
     filename: 'example/bundle.js'
   },
+  devServer: {
+    disableHostCheck: true,
+    // listen server to be accessed from another host
+    // useful for mobile testing
+    host: "0.0.0.0",
+    port: process.env.PORT || 8080
+  }
   // resolve: {
   //   alias: {
   //     'react': 'preact-compat',