[TagsInput] Allow more than one delimiter

[carlgunderson]

Is there a reason you can only specify a single delimiter on the TagsInput component? It would be a useful UX improvement if you could specify several, as either a regex, array, or something like delimiter={ ',' || ' ' || '\n' }.

For now I came up with my own onPaste handler (controlled component with value prop):

const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {
  e.preventDefault()
  
  const text = e.clipboardData.getData('text/plain')
  console.log('Pasted content:', text)
  
  const items = text
    .split(/[\s,]+/) // Split on any combination of spaces, commas, or newlines
    .filter((item) => item.trim() !== '') // Remove empty or whitespace-only strings
  
  const dedupedItems = [...new Set([...value, ...items])] // Combine and dedupe
  
  handleChange(dedupedItems, true)
}

This seems like a small but useful UX improvement considering user behavior when pasting in lists of text from external sources.

[segunadebayo]

Closing — the delimiter prop accepts a RegExp, so you can use e.g. /[,;\s]/ for multiple delimiters.