olahol/react-tagsinput

Highly customizable React component for inputing tags.

react-tagsinput's Issues

Easy way to "disable" it?

Hi, I really like your great control and now I'm having to show it "disabled" in a certain cases. Is there an easy way to do this? Basically I would want to disable the input box and the "x" on the existing items to prevent deletions.

Thanks,
Alvaro

Add displayName for use without JSX

We just need to add displayName: 'TagsInput'.

I'll submit a PR for this soon.

https://facebook.github.io/react/docs/component-specs.html#displayname

Asynchronous validation?

Hi!

First, thanks for this repo; it's been very easy to integrate this component into a form I'm building.

I was wondering if you had any suggestions for how to handle async validation? I'm using react-tagsinput to let user enter a list of usernames. I need to validate those username against a REST API. It doesn't look like it would work out-of-the-box; addTag calls validate and expects a synchronous response. There's also the question of what to do with an invalid tag when an async response comes back.

Set Focus To Input Field On Click Anywhere Within Control

I made a simple change on my fork that you might want to include: make the tag control's wrapper div, the one with the react-tagsinput CSS class, "hot clickable": when user clicks anywhere within the containing div the tag's input field receives focus. A one line change since the required method already exists:

    , render: function() {
      // ... some code
      return (
        React.createElement("div", {
          className: ns + "tagsinput"
          , onClick: this.focus // <-- add this call
        }, // ... more stuff

Believe this makes the thing feel "more of a piece" -- a single, seamless control.

As always, thanks for this -- a demo with our users went exceptionally well yesterday, in no small measure thanks to this component. They didn't even end their comments with the usual "oh, but there is one more thing we need tweaked...". Bravo!

1.5.0 should be 2.0.0 (react 0.14)

Updating to depend on react 0.14 and react-dom 0.14 is a breaking change, and the version number should reflect that (2.0.0).

If you have "react-tagsinput": "^1.3.3" in your package.json (like I do), you have to hard-set the version to whatever pre-1.5 release was now, which — although is not the end of the world — is both annoying and against npm's idea of semver.

Add drag re-ordering support

Really great library - the one thing missing for us however is the ability to change the tag order using drag and drop. Is this something that is being considered?

Do you think using something like https://rubaxa.github.io/Sortable/ would solve this?

Restriction on number of tags

How to stop users from entering more tags if say, 10 tags already there?

I thought of disabling the Input component and adding a state of "maximum".

I know that I can customize your component to achieve this, but I would like an official implementation of this.

Thanks.

Better way to clear/reset tagsinput

Hi there,

Currently doing my first bigger project in react. Thank you for the library btw, very handy.

I'm processing a list of tags with a button, all fine. Once I've "processed" the tags and show them in another read-only view. That is all working fine.

But I want to reset or clear the input box of any tags. I have something that works, but I'm getting some code smell and figured there is a better way to accomplish the task. If not, no worries. Just thought I'd ask.

Anyways.. the codes.

var TagComponent = React.createClass({
  ...
   processTags: function(){
      GlobalActions.processTags(this.refs.tags.getTags());

     //code in question
      _each(this.refs.tags.getTags(), function(tag){
        this.refs.tags.removeTag(tag);
      }.bind(this));
    },
   ...
   render: function() {
    return (  
      <div>
           <TagsInput ref='tags' placeholder='Add tag'/> 
           <button type='button'  onClick={this.processTags}>Process tags</button>
      </div>
    );
  }
  });

Timing Problem With onTagRemove method

Thanks for building this, it's proved a tremendous help, but I am experiencing one oddity with respect to the timing of events when a tag is removed.

My onTagAdd and onTagRemove callbacks call the getTags method:

_onTagAdd: function (tag) {
    console.log('add', this.refs.tags.getTags());
},
_onTagRemove: function (tag) {
    console.log('remove', this.refs.tags.getTags());
},

The list is correct for onTagAdd (the new tag has been included), however, for onTagRemove the list still contains the deleted tag. Thinking it was a timing issue I added a componentDidUpdate handler to my component:

componentDidUpdate: function (argument) {
    console.log(this.refs.tags.getTags());
},

Now the list is correct for both add and remove actions. Looking in react-tagsinput.js I note that whereas the addTag call to the React setState method includes a callback, removeTag does not. This is where I think the problem lies. If the remove method is structured like the add, with a callback for setState invoking the onTagRemove prop, the problem seems fixed:

    , removeTag: function (tag) {
      this._valueTransaction(function (value) {
        var clone = value.concat([]);

        for (var i = 0; i < clone.length; i += 1) {
          if (clone[i] === tag) {
            clone.splice(i, 1);

            this.setState({
              tag: ""
              , invalid: false
            }, function () {
              this.props.onTagRemove(tag);
            });

            return clone;
          }
        }
      }.bind(this), tag);
    }

Has anyone else experienced this problem or is this my user error? I made a branch with the proposed fix (easiest way to test is by adding the feedback on completion.html as I did above)

Thanks again for this component!

I think u can remove require of react-dom

use React.findDOMNode function

Can't enter new tags in input complete mode

In the input complete mode as shown in https://github.com/olahol/react-tagsinput/blob/master/example/completion.html, pressing the enter key does nothing and hence, no new tags can be created.

Give close button a unique className

Since upgrading to 3.x the close button no longer has a unique className.

The suggestion to make a CSS rule targeting .react-tagsinput-tag a::before is not suitable for me because I am actually using <a> inside my tags themseleves, and thus there is no easy way to differentiate (via CSS) between the link in my tag name and the link for the "close" button.

Feature: Bootstrap integration

Would be nice if there was a Component or even simply an example that uses the label class for tags and form-control for the <input>. This works great with the prepackaged style but making it work with Bootstrap is a bit different.

More Context in onChange

Would be good to have more context in onChange. For example, the ability to know what value was changed specifically. This would make it much easier to implement into a redux-form like environment. Right now I get an array of tags but have no idea what values were actually modified, etc so I can't really send the changed values to redux form very well.

Can you add license file?

Title says it all 😄

Component does not re-render when props are updated

As a side effect of copying props to state, when new props are sent to the component, the components state is not also updated. Example resolution:

componentWillReceiveProps(nextProps) {
    this.setState({tags: nextProps.tags.slice(0)});
}

Naming `ReactTagsInput ` module instead of leaving it anonymous makes RequireJS unable to load it

See line https://github.com/olahol/react-tagsinput/blob/master/react-tagsinput.js#L3.

Required attribute

It looks like there was once a prop for required https://github.com/olahol/react-tagsinput/blame/f9063330ee0ec6db509d2b73f1e6dde613e9956e/README.md#L130 But I don't seem to see this in the code (f906333) or the docs anymore.

How would we make it be required to enter at least 1 tag?

completion and predictive tags

Do you plan any completion/predictions? I am thinking whether to hack your component or write my own. I think the easiest way of enabling your component for completion is to add something like onBeforeTagAdd and onBeforeTagRemove (and probably rename onTag{Add,Remove} to onAfterTag{Add,Remove}) so that the completion can be made on demand before the tag is added.
onBeforeTagRemove might be worth for the case where somebody does not want to allow removing tag X that is a prerequisite for another tag Y or so.

The use case in my head is "multiselect on steroids." Imagine the form like this:

• one tag-input for user group -- choose tags where tag = user group id (name is displayed, id is internal)
• one tag-input for users -- choose users (tag = user, name displayed, id is internal), but only from the members of selected groups

...in other words, tag should be an object, not a string, so there should be also some method for "matching" the objects agains the input keyword :)

It would be also nice to have onAfterAddKeys so that enter on empty tag would trigger some action (for example skip to the next input in the form).

Is that something where your component is going to evolve in the future? ;-)

Specifying inputProps overwrites the default object and removes className

For example, adding a placeholder will result in removing the className:

<TagsInput onChange={::this.onChange}
                   value={this.state.tags}
                   inputProps={{ placeholder: 'add a tag' }} />

This is due to the fact that inputProps as a default value of { className: 'react-tagsinput-input' } and gets replaced by the provided one ({ placeholder: 'add a tag' } in the example above).

The workaround is to just re-add the className to inputProps so it may not be a top priority though. I'll eventually submit a PR if it's something that deserves a fix.

Create multiple tags from one string

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

Browser Compatibility?

(I know it's very annoying and everything, but...) Do you know the current browser compatibility of react-tagsinput? I am working in a project that I must support IE8+, unfortunately.

Thanks anyway.

Functionality lost in v3?

What happened to all the other functionality that tags input had in v2? v3 seems like a step back.

REF: blur method

It would be handy to have a blur method to go with focus.

Feature request: Pass an array of suggested tags.

It would be nice to be able to pass-in an array of tags that can be chosen. When typing, the component would show a list of suggestions from the array that match what the user has typed. Finally, a property that tells the component to only accept tags from the list.

Here's an outline of what I'm thinking:

• props.onSuggest Function that takes the input value and returns an array of suggestions. When the user types, call this function and use the result in a call torenderSuggestions
• props.addKeys should complete the suggestion
• and should select a suggestions from the list
• props.onlySuggested The user can only choose from 'props.suggestions'
• props.suggestions can be 'updateable'.
• props.renderSuggestions - function that takes in the list of suggestions and returns jsx

I haven't looked into what it will take to implement this, but if there is interest, then I can get to work on it.

Let me know what you think and if it is possible...or if there is already a way to do this.

Thanks so much! 🍰

Invariant Violation: addComponentAsRefTo(...) in Electron (io.js, commonjs, es6)

While attempting to use your component in an electron app, I've been seeing the following error thrown:-

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

Most of the articles online say this is caused by having two copies of react loaded at the same time. To work around this I'm first loading react into a global variable like this:

global.React = require('react');

And then making a minor change to the file react-tagsinput.js:4

    module.exports = factory(React ? React : require("react"));

Is this something you could incorporate into your code?

add `onFocus`

Pretty self explanatory - there's currently no good way to add a proper focus ring around the complete input.

Warning on React 15.2.0

I updated an app to React 15.2.0 (from 15.0) and now I get this warning:

Warning: Unknown props `addOnBlur`, `addOnPaste`, `inputProps`, `pasteSplit`, `onlyUnique`, `maxTags`, `validationRegex` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

tags completion problem

screen recording: https://vid.me/PUSG
It seems that the completion part not always clickable(both in chrome and safari, OSX 10.10.3).

Why and how to correct this?

Thanks.

react jsx in render?

Hi, I'm getting a warning:
Warning: This JSX uses a plain function. Only React components are valid in React's JSX transform.
when including this component because I'm using JSX. Any thoughts on how to get around this?

Possible invariant violation introduced by react-tagsinput

When I install this library with npm and then require it in my project, I get this error:

Uncaught Error: Invariant Violation: EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.

Even stranger, the error won't go away until I remove the require statement AND uninstall this from my node_modules dir with npm uninstall react-tagsinput

demo code share

can you share the code used in the demo?

Not working with React 0.14

Can't install it with the new version of React

Features: Clear On 'Escape' Key, Propagate onKeyDown Event

I'm quite pleased with how easy working with this has been -- particularly the completion example y'all provided. I've forked the code to add two somewhat related features:

1. clear the input field when user hits escape;
2. propogate the KeyDown event;

I suspect the first one (to clear input) is more univerally useful, however, if one's using this as demonstrated in the completion example (ala Typeahead) the suggestions should be cleared when the input is cleared. Watching the Key Down allows me to do this.

I'm still tinkering, so code may not be that great, or there might be a cleaner way to do this (for example, fire a "onInputCleared" method), or it's already possible.

Handling escape is easy:

    , onKeyDown: function (e) {
      var add = this.props.addKeys.indexOf(e.keyCode) !== -1
        , remove = this.props.removeKeys.indexOf(e.keyCode) !== -1;

      if (e.keyCode === 27){
        this.setState({
          tag: ""
          , invalid: false
        });
      }

      // ... more code here
    }

Likewise, if it's useful, passing along the KeyDown is, too

    , onKeyDown: function (e) {
        // do exising stuff... then:

        if (!add && !remove){
          this.props.onKeyDown(e);
        }
    }

Then, back in my component:

  _onKeyDown: function (keyEvent) {
    if (keyEvent.keyCode ===  27) {
        this.setState({ suggestions: []});
    }
  },

Thanks again for all of your work.

(Sorry for logging feature requests here, wasn't sure where else to send it. I'm not offened when you Close this out.)

Feature request: Restore default tab behavior when there are no tags to be completed

As it stands, you can't tab out of a tag field to the next field in a form. It'd be nice, at least as an option, to have tab act normally if the user hasn't typed anything to complete as a tag. This would let you hit tab once to finish your current tag, and then tab again to get out of the field.

Using with react 0.14

Hi,

I tried installing this with react 0.14-beta3 but it will not install using npm 2.x because of peerDependency.

I'm not sure if you've tested this against 0.14 yet, and if you plan to support 0.14?

Thank you.

don't prevent tabbing when there's no input value

When tabbing through the interface, you get stuck in the input field, even if there's no value. It'd be nice if you could leave the input by hitting the tab key in this case.

click on button - create new tag

Is it possible to make a button the same functionality as enter click?

I would really like if people were able to write their tag, click a button next to the ReactTagsInput container and then the tag was created - instead of having to click enter.

Thanks in advance!

Configuring the layout of input & tags

Hi,

I'm considering a layout where I have an input field and the tags below it. This would allow me to give the user more room to type stuff before creating tags. This is because my interest is in being able to paste in a bunch of emails and create a set of tags from the emails so the current input field is a little small.

I thought we might be able abstract the piece of code at the end of the render function that outputs the div, tags & input to either be a function or another component which can then be overridden by a prop for people who would like to customise it? A function would take the tags and input node as arguments and return the final JSX. I suspect a function might be simpler so that output is still owned by the main component rather than a child.

I would also be curious to allow use of a textarea instead of an input field if you would consider that.

I'm not sure if these are deviating too far from your vision for the project though. I realise that at a certain point it might as well just be another component :)

Thanks for making this project available,
Michael

Edit: I'm very happy to make a pull request if this is something you'd consider.

Css float: left issues with tags

I had some issues when removing tags and as a result the input field was displayed before some of the tags. In my configuration, I removed float: left and added display: inline-block for tags, and it worked like a charm.

Unable to paste in text - invalid format (IE).

Related: #35

Hi,
I'm having trouble pasting content into the component in IE 11.

I'm using the component to enter multiple emails (type in or copy/paste), using the pasteSplit prop to separate the pasted text into multiple tags.

I've narrowed down the problem to

 let data = e.clipboardData.getData('text/plain')

(https://github.com/olahol/react-tagsinput/blob/master/src/index.js#L190)

The format text/plain seems to be invalid in IE 11. If I set it to let data = e.clipboardData.getData('Text') instead everything works just fine in IE 11 (then it doesn't work in decent browsers).

I don't believe that common polyfills or shims like 'babel-polyfill', 'es5-shim', 'es6-shim' takes care of this issue.

Can some of the contributors/owners verify this behaviour or do you know what fixes this?

I'm setting these props:

<TagsInput
    ref='tagsInput'
    value={emails}
    addKeys={[9, 13, 32, 186, 188]} // tab, enter, space, semicolon, comma
    onlyUnique={true}
    addOnPaste={true}
    validationRegex={EMAIL_VALIDATION_REGEX}
    pasteSplit={ data => {
        return data
        .replace(/[\r\n,;]/g, ' ')
        .split(' ')
        .map(d => d.trim())
    }}
    renderTag={ props => {
        let { tag, key, onRemove, ...other } = props
        return (
            <span key={key} {...other}>
              {tag}
              <a onClick={() => onRemove(key)}>×</a>
            </span>
        )
    }}
    renderInput={ props => {
        let { onChange, value, ...other } = props
        return (
            <input
                {...other}
                type='text'
                onChange={onChange}
                value={value}
                placeholder='Add emails'
                />
        )
    }}
    renderLayout={ (tags, input) => {
        return (
            <div>
              {tags}
              {input}
            </div>
        )
    }}
    onChange={ tags => {
        this.setState({emails: tags})
    }} />

Feature request: Support for pasting

Hi,

Would you be interested in supporting paste? I could provide an initial PR that does a lot of the work required if so.

Is there a way to set a placeholder? For example "Add tags"

Is there a way to set a placeholder? For example "Add tags"

Seems there is one in your demo gif but not in the actual demo.

My tags are populated dynamically, and sometimes it is an empty array.

Thanks

Callback for invalid tag

Hi there,
I have a use case where I want to show an error message when the user attempts to add an invalid tag. I don't see any way of doing it right now with the current API unless I use the onChange prop. How I see it working is to to have a prop field called onInvalidTag which gets called in the this.validation method when the validation fails. Any thoughts or is there already a way of doing this?

Thanks a lot.

validationRegex issue

With the latest update, i'm getting this issue:

Warning: Failed propType: TagsInput: prop type `validationRegex` is invalid; it must be a function, usually from React.PropTypes.

I looked at the code and it has a default. What am I missing here?

Cannot read property 'map' of undefined (after update of React)

Hello everyone. Have anyone encountered this problem? Everything worked just fine, until I updated React and dependent libraries to recent versions.

Here is code of my component https://jsfiddle.net/rsruhk3u/

I would appreciate any help

Access input element for "disabled" attribute

In relation to issue #21 and similar operations, I would like to be able to access the input text element and disable it on a callback function like beforeTagAdd or even onChange, etc. Thank you.

Multiple calls to addTag fail

Hi,

I've attached a closure to onTagAdd, where I check if the inserted tag contains whitespace. If it does, I remove this tag, split its value on whitespaces and add back every element of the resulting array.

The expected is result is that when I paste "aaa bbb ccc", I get 3 separate tags, respectively "aaa", "bbb" and "ccc". Instead, only the last call to addTag succeeds, and the former tag (with spaces in it) remains, which in this example fives me "aaa bbb ccc" and "ccc".

Here is the code I use :

React.createClass({
    splitTags: function(tag) {
        var tags = tag.split(/\s+/);

        if (1 < tags.length) {
            this.refs.tags.removeTag(tag);

            tags.forEach(function (splittedTag) {
                this.refs.tags.addTag(splittedTag);
            }.bind(this));
        }
    },

    render: function() {
        return (
            <ReactTagsInput
                ref="tags"
                onTagAdd={this.splitTags}
            />
        );
    }
});

I tried a simpler case, where the splitTags method's body only consists of the following :

this.refs.tags.removeTag(tag);
this.refs.tags.addTag('aaa');
this.refs.tags.addTag('bbb');
this.refs.tags.addTag('ccc');

The result, when validating "aaa bbb ccc", is "aaa bbb ccc" "ccc" "bbb".

Is addTag asynchronous ? Does it accept a callback, yield a Promise, anything that could help me manage this properly ?

Thanks a lot !

Allow non-strings (specifically, React Components) to be rendered within tag.

This library is great, thanks for all the work! I needed to extend it a bit so that I could drag/drop my tags once they were created.

I came across the transform function and noticed that its contents are expected to be a string.

I modified the library a little bit so that I could return more than just strings, like so:

transform(tag) {
    return (
      <DraggableField tagText={tag}/>
    );
  },

Which allowed me to render this:

Internally, I'm thinking of storing objects instead of strings and use tag as the key and the value could be whatever: strings, react components, etc. So instead of

valueLink.value.concat([tag]);

I am thinking something like

_.extend(valueLink.value, {tag, newTag} //newTag is the result of `format`

If you think this might be an appropriate feature addition, I can spend a bit more time on it, add a test, and make a pr. Thanks.

react as a dependency?

react should be a peer dependency according to react and npm since version 2