paste operations can bypass the delimiter checks

[Pomax]

As the code analyses letters as they get typed, it fails to detect that it should slice up a string into tags when someone pastes in a string.

For example, with a delimiters array that contains 188 (the comma), normally people can type food, cake, chocolate and get three tags, but pasting the string "food, cake, chocolate" will bypass the detection and end up as a single tag with commas in it.

[Pomax]

Clicking outside of the input also bypasses creating a tag, so adding an onblur behaviour to turn the outstanding text into a tag might be a good idea, too

[i-like-robots]

Interesting thought, I can definitely see the flip side happening when somebody desperately needs commas!

[i-like-robots]

I've had a think and a chat and I reckon this functionality should be handled by the handleAddition callback of the implementation. The reason being that if you do not have the comma set as a delimiter key (which it isn't by default) then things can get funky, quickly!

We use the component in the office here in a few places to attach concepts to content, and a quick look at the 85,000 or so concepts in use shows commas are prevalent.

Fortunately it's pretty much a one-liner these days:

// before
handleAddition (tag) {
  const tags = [].concat(this.state.tags, tag)
  this.setState({ tags })
}

// after
handleAddition (tag) {
  const split = tag.name.split(/,\s*/).map((name) => ({ name }))
  const tags = [].concat(this.state.tags, split)
  this.setState({ tags })
}

[i-like-robots]

Before I close this issue, I did have a mess around with String.fromCharCode to see if this can be done automagically within the component but of course JS key codes and unicode points don't match up =[

CC #81

[Pomax]

where I say "commas", I'm really talking about "anything in delimiters". Our codebase disallows commas in tags, they are explicitly tag delimiters (think stackoverflow rules: spaces are fine, commas are not), so if I paste a string with commas that paste should be cut up into tags. Similarly if you paste a slew of words seprated by tabs, you want to split up into tags, not stored as one tag with actual \t in them =)

The issue really is more about "if text is pasted, and there are characters in that paste that are supposed to be delimiters, tag processing should kick in".

[i-like-robots]

I suppose this could have to be an extra option, or change the existing option to a map (keyCode => string)

[Pomax]

only as "option to turn it off" surely? If you've set up a tag input with delimiters, you've explicitly said "these characters are NOT allowed in tags", so pasting them in should not lead to them making it into tags, they should trigger the same tag parsing as typing that string manually letter by letter?

[i-like-robots]

I mean an extra option to specify the characters. AFAIK mapping the current delimiters option of key codes (or a KeyboardEvent.code 🙂) to a literal "," is not possible.

[Pomax]

Ah, fair point, why we decided that "implementation-dependent" codes were fine back when we invented keyboard events I will never know.

Would it make sense to add something like this?

handleAddition (tag) {
  let tags = this.state.tags;
  if (this.props.processAddition) {
    tags = this.props.processAddition(tag)
  } else {
    tags.push(tag);
  }
  this.setState({ tags })
}

Then people with custom delimiter lists can also add a custom handler that can do "the right thing" based on their own list of delimiters:

render() {
  return <ReactTags
    tags={ this.state.prefabTags }
    delimiters={ KNOWN_DELIMITERS }
    processAddition={ this.safifyTags }
  />;
}
safifyTags(input) {
  if (input.indexOf(blah) === -1)  return [input];
  return input.split(blah).map(v => v.trim());
}

[i-like-robots]

I can see some value advocating a pattern, but if the parent component is already in control of how tags are added (the handleAddition is not a method implemented inside this component!), would such an option add much extra?

[Pomax]

It's not? It's only in control of "tags we already know about in our system at this point in time" mostly for case folding purposes, e.g. we have a known tag IoT, a user types iot, we switch it for the known-case version instead. Whether they type that by hand (in which case it's easy to catch) or through a paste from some notepad or whatever they had open, or another webpage, etc, that functionality still needs to kick in, and the parent is not responsible for tag list creation, although it can be responsible for passing in a tag validation function like the one above (say, passing in some utils.tagvalidator, which the parent doesn't care about in the slightest other than "making sure it gets passed in, whatever it does")

[ajmas]

Based the pull-request submitted for issue #87, we can use the onPaste event. A basic handlePaste implementation:

  handlePaste (e) {
    const { delimiters, delimiterChars } = this.props
    
    e.preventDefault()

    const data = e.clipboardData.getData('Text')

    if (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++) {
        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
          if (matchIdx > -1) {
            this.addTag(this.suggestions.state.options[matchIdx])
          } else if (this.props.allowNew) {
            this.addTag({ name: tags[i] })
          }
        }
      }    
    }
  }

with the following code added to the <div>:

onPaste={this.handlePaste.bind(this)}

Edit: I have updated the example code to do the same checks that handleKeyDown() does to check whether the tag exist, before adding it. I'll present this as a pull-request if this looks good to everyone and if the fix for issue #87 is accepted. One other thing, if we want to accept a keyword list that already has a tab in it, then we need to add '\t' to the delimeterChars property.