Create multiple tags from one string

[Michael Jones]

Hi,

Thanks very much for sharing this project. It looks great!

I'm trying to figure out if I can use it for a project I have where I'd like to paste in a set of email addresses and have the field process them and create a tag for each email address. I'd be writing the email address processing bit, but I'm wondering if there is a hook in the API for taking the input text and returning one or more tags from it?

I can't see it myself but perhaps I'm missing something. The API looks very complete but I'm not sure which methods to attempt to use for this end. Or if it isn't possible would that be something you'd be interested in supporting if I tried to implement it?

Thanks again,
Michael

[Ola]

Hello @michaeljones ,

The answer to this question depends on whether you are controlling the component directly by setting value and onChange or if the component is uncontrolled. In the controlled case where the tags are linked to some state it's as simple as splitting the tags in the onChange handler and setting the state.

When it's uncontrolled it's a bit dirtier, what you currently have to do is to add a handler to onTagAdd that looks something like this:

      handleTagAdd: function (tag) {                                                                                    
        if (tag.indexOf(",") > -1) {                                                                                    
          var tags = tag.split(",");                                                                                    
          this.refs.tags.removeTag(tag);                                                                                
          tags.forEach(this.refs.tags.addTag);                                                                          
        }                                                                                                               
      },    

Not very pretty but it works. I'm thinking of modifying the behavior transform to say that when it returns an Array it adds multiple tags.

[Michael Jones]

Thank you for such a quick response. I'll investigate the options you described. I haven't written anything yet and this is going to be a smaller targeted app so I can use the controlled component approach if that seems cleaner.

That said, I have been hoping for a suggestion like your potential change to transform. It feels like returning an array is quite a natural fit for that feature without disturbing things too much. Though that is a a guess as I am not familiar with the code base!

Thanks again.