i-like-robots/react-tags

⚛️ Legacy repo for the fantastically simple tagging component for your React projects (legacy repo)

react-tags's Issues

ReactTags with Preact 8.x

Howdy!
I've tried to use ReactTags with Preact, but this is not working well. Is it possible to make a quick fix for it?

Sandbox: https://jsfiddle.net/londeren/bd52oyqq/

Adding a new tag entered by a click on another component.

Let's say I want to have another button/icon that when clicked adds a tag that is being entered in this component.

What's the cleanest way to do that?

I'll want to update the state of tags, as well as clear the input text entered. I haven't worked out how to do the latter yet.

Thanks.

UMD Build

My work requires a UMD built file. Is there a possibility of adding this to a dist-amd folder?

Limit the number of tags

Is there a way to limit the number of tags the user may create?

Custom filtering function

Would be a great feature to allow customizing the filtering function.
The current function looks for matches at the beginning of each word (^|\s), but in my case I needed to use word boundaries (^|\b). And I think another common case would be implementing fuzzy search. So, providing a filteringFunction prop to override the default func would be nice!

KeyboardEvent.key not working on certain Android devices

While testing for issue #84 on Android I ran into an issue, whereby the KeyBoardEvent.key was producing undefined, causing issues with matching against delimiterChars. At the same time the default delimiters aren't useable on phone keyboard, due to lack of tab key and enter not being available, other than when suggested tags are shown.

When connected to a computer, for debugging the view in Chrome on the computer does provide event.key values on the phone, but not when typing from the phone's keyboard.

A limitation with event.keyCode, if we used that as fallback, is that 'A', 'a' and '@' all provide the same value, when using the US English layout.

I tried using keyboardevent-key-polyfill, but that didn't prove of use since 'event.key' is technically supported, but not receiving the right values from the on-screen keyboard.

My initial tests were with an LG Stylo 2, running Android 7 and Chrome 60, though I did test with two other Android phones and got the same behaviour.

Note, that I did not experience any issue when testing with iOS.

Edit: Have opened a ticket against Chromium, to see if this could confirm a device bug or provide a lead to the issue cause:

https://bugs.chromium.org/p/chromium/issues/detail?id=763559

Update: per the response on the referenced ticket we should look into using oninput or onchange instead, since the limitation encountered is apparently due to the behaviour of the 'soft keyboards'.

Update: oninput won't provide us the values of non-printing characters. onchange only gives us the the new state. The ticket was marked as "Won't fix" which is a little disconcerting, since they have essentially broken onKeyDown when it comes to non-deprecated values.

Can't enter tags unless there are suggestions

Hello!

Hope fully i'm not being a numnuts here -

The documentation says that the suggestions are optional. However, when I leave the suggestions parameter as empty [], and try to submit a tag, nothing happens. Pressing enter does not submit the form to add the word I've just typed as a tag.

Am I missing something?

Convert user specified event handlers to React naming conventions

Currently we are allowing the users of react-tags to specify the following event over-ride handlers:

• handleDelete
• handleAddition
• handleInputChange
• handlePaste

React would expect the to start with 'on', such that:

• onDelete
• onAddition
• onInputChange
• onPaste

To bring react-tags in line with conventions it would be good to update these. At the same time, a change here would likely break existing code, therefore the evolution should be:

• Add the new events, deprecating the current ones, in a minor release
• Remove the current ones, in a major release

Preventing characters in a tag?

What is the suggested way for preventing unsupported characters from appearing in a tag? For example we don't want to allow commas or spaces, due to expectations of the backend system.

paste operations can bypass the delimiter checks

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.

Update dependency versions

A number of the dependencies are out of date, so we should probably update them.

this.state undefined

Hi I have a problem with this component, this is my code but when I try to add or delete this.state is undefined....where is the mistake?

class Autocomplete extends Component {
 constructor(props) {
        super(props);
this.state = {
            alarm : alarm,
            users : [],
            allusers : []
        }
}
handleDelete(i) {
        console.log(this);
}
render () {
        return (
          <ReactTags tags={this.state.users} suggestions={this.state.allusers} handleDelete={this.handleDelete} handleAddition={this.handleAddition} />
        )
}

<Autocomplete onEnd={this.updateUser} alarm={this.state.alarm} />

Customize the html of the tag

How do I compile this file?
I'm using it in node_modules.

AutoFocus={false} is not always respected

I set autofocus to false as a default prop and/or as a prop input, yet sometimes if I navigate away and back, the field is focused automatically.

This is especially noticeable when using minQueryLength={0}, as the dropbox appears despite never selecting the field.

error from Backslash

Hi all – when typing a backslash into the input field, I get the following error:

Uncaught SyntaxError: Invalid regular expression: /\b\/: \ at end of pattern

which points to the var regex... line below:

function filterSuggestions (query, suggestions, length) {
  var regex = new RegExp(("\\b" + query), 'i')
  return suggestions.filter(function (item) { return regex.test(item.name); }).slice(0, length)
}

Is this a known issue? Is there an existing way to deal with this? I can't see how to hook into the onChange event to add additional input filters.

Any advice/help most welcome.

Thanks for the cool component.

Hide suggestions on blur

Currently the functionality of showing/hiding suggestions is a little strange, E.G. When a query is entered and matching suggestions are displayed...:

1. ... pressing escape will empty the suggestions list. Altering the query will display them again.
2. ... un-focussing the input (blur) will not hide the suggestions list.

I think that the suggestions list (when available) should be displayed/hidden on focus/blur. I think the functionality of the escape key is superfluous.

Upgrade Babel

This project is still using Babel v5 which gives us limited configuration over the output. We should offer an ES6 jsnext:main entry point alongside an ES5 transpiled entry point.

Clicking on the last tag removes all of them, does it suppose to be like that?

I just added tag (3 tags for example), and click on the last tag. It removed all the tags at once.
If I'll click on the first one it will be fine.

Why is the index passed as the parameter to handleDelete and not the tag?

If you generate the selected tags at render and do not store them in state, there is no way to see which tag was deleted. It should call handleDelete with the tag. You can then get the index of the deleted by going tags.index(tag) if you needed the index for whatever reason.

Calculated width of input isn't correct

Love the updates you made to react-tags. I'm just seeing an issue where the width of input isn't calculated correctly (it's narrower than the text). Perhaps it's the font I'm using? How is width calculated?

Note: I'm using styles.css from the examples.

Preact compatibility

Refactor the components into ES6 classes and test compatibility with Preact.

"Warning: Unknown prop `autoresize` on <input> tag.

Hello,

We are using react-tag-autocomplete in our project. We are getting the following warning when launching our component.

"Warning: Unknown prop autoresize on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in input (created by exports)
in div (created by exports)
in exports (created by exports)
in div (created by exports)
in div (created by exports)
in exports (created by TagElem)
in TagElem (created by MVMComponent)

We did suppress the property autoresize when we are launching react-tag-autocomplete by using delete props.autoresize. Looks like autoresize is optional anyway but I think your component should also suppress sending the property to underlying . Could you please let us know if there is any workaround? thanks.

The aria-activedescendant prop is broken

Autosuggestion just by focus

Hi ,
I want all autosuggestions when input gets focus by user. Is this possible? Right now, I have to type "b" for banana . I want it should display all the autosuggestion options after user put focus on input . I am building project management app. I want to use this for "who will do this task?" . So, when someone put cursor in input tab, i want it to show all the sugestions (in my case total suggestions will never pass 5 items) . Can i do this?

Tests required

This component currently lacks any automated testing. Unit testing may not be appropriate but E2E testing would be useful.

Breaks React-Transition-Group

For some reason when I add the component to a sidebar which uses react-transition-group CSS animations. The animations work fine without the component, but with it the animations (intro/appear) do not work. However the exit animation still works.

Having a hard time figuring out what is causing it. Any help would be appreciated.

Thanks,

insert checkbox

I am customizing the tags, once finished I will give a pull request.
Examples:

【Question】Is there any easy way to show optional variable in Suggestions component ?

Hi. Really thanks for great job : )

I want to show the "tag's counts" in suggest component like medium.

Is there any easy way to do this??

MouseDown causes bugs - use onClick instead?

We have a react-tags component at the bottom of a modal. If you click on a suggested tag which extends below the bottom of the modal, the tag is selected on mouseDown, the suggestions disappear, then mouseUp happens on the backdrop, causing the modal to close.

Is there any reason you are using onMouseDown instead of onClick or onMouseUp?

Allow customizing 'Click to remove tag' text

Please allow customizing Click to remove tag text.

Multiple closed buttons if 'name' is an element

if you would like the content of the selected tags to, for example, have an icon:

const tags = [
  { name: <div><i className="fa fa-circle" />{'my name here'}</div> }
]

The resultant tag has multiple close buttons:

Auto-selecting the first suggestion

Is this currently possible?
I think it would help in terms of UX. Type, enter, type, enter. Rather than type, down, enter, type, down, enter.

maxSuggestionsLength property not passed from ReactTags.js to Suggestions .js

in ES6 this is code :
React.createElement( Suggestions, Object.assign({}, this.state, { ref: (c) => { this.suggestions = c }, listboxId: listboxId, expandable: expandable, suggestions: this.props.suggestions, addTag: this.addTag.bind(this) }))

I believe maxSuggestionsLength should be added because it is undefined in filterSuggestions() length param.

Sorry for my bad English. :)

Follow BEM or SUIT conventions, not kinda sorta both

using a singular namespace of .ReactTags is good but after that the convention sort of falls down and is neither BEM nor SUIT - both of which are well known and understood.

.ReactTags
.ReactTags__selected
.ReactTags__tag /*! this is a sub-component of the previous */
.ReactTags__tagInput /*! this is _not_ a sub-component of the previous */
.ReactTags__suggestions

Could become:

/* SUIT */
.ReactTags
.ReactTags-selected
.ReactTags-selectedTag
.ReactTags-search
.ReactTags-suggestions

/* BEM */
.react-tags
.react-tags__selected
.react-tags__selected-tag
.react-tags__search
.react-tags__suggestions

Delimiters and keyCode limitation, with non-English keyboards

There appears to be a small limitation when using keyCode as delimiter. Using the comma, as example:

   ','.keyCode(0) --> 44
   comma key pressed returns 188

So the solution would appears to be use use delimiters=[ 188 ], but this actually has a limitation if we are targeting a user base where English is not the UI language and the keyboard places the comma elsewhere, such as with the Arabic keyboard. In this scenario the keyCode is that of the 'K' key.

Testing suggest the event.key value is actually more accurate in this case. To allow for the character, on top of the key code, while maintaining backwards compatibility, the simplest approach could be a new property:

   delimterChars=[',']

So the resultant code would be:

if (this.props.delimiters.indexOf(e.keyCode) !== -1 || this.props.delimitersChars.indexOf(e.key)) { ... }

If you think this is an acceptable solution I could create a PR for this?

Disable highlighting

I want to disable highlighting in the AutoSuggest box. It will be convenient to do it via prop.

Increase code coverage

Certain scenarios are not covered by code coverage. The one that jumps out as needing covering is ReactTags.componentWillReceiveProps(), though there are surely others that can be worked on.

As a check-list (edit to add any other points):

• ReactTags.componentWillReceiveProps()

Unknown prop `autoresize` on <input> tag

Any reason you reversed 6fb7fd6 in 5b7bf5d?
React throws this ugly error again..

"Warning: Unknown propautoresizeon <input> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Upgrade to React v15

Delimiters - Any workarounds?

I see that being able to specify delimiters was removed in v5, is there a work around to that? My use-case requires a comma and a space to create a new tag to as I'm replacing an existing component with that behaviour.

Is there an alternative or workaround to achieve the the behaviour we're looking for?

add blur/focus listening capabilities

It would be rather useful to have onBlur and onFocus as props on the react-tags component so that parents can make decisions around whether to hanging input (text typed by the user but not yet interpreted as a tag) should be processed or not.

For example: a form with react-tags, user type "computer vision" and then clicks on "submit" rather than typing tab/enter first. With onBlur handling, the component that manages the full form can make an informed decision on whether or not to take the current string on board or ignore it before letting the form submission go through.

Function called when user clicks on input tag

Hi,

I need to handle an onClick function that should be called when input tag is clicked... It's possible?
Thanks!

Use name other than "id" or "name"

Hi,

I would like to use the following JSON data for my suggestions field. I am accessing it via a fetch.

I have been able to get the tags to appear for each json object- but no text name/titles appear. I'd also only like to use the tags within "tags".

So this data:
[{
"title": "Citizen Cain",
"tag": [
{
"name": "Movie",
"taglevel": 1,
"id": 1
},
{
"name": "Classic",
"taglevel": 2,
"id": 4
}
],
"info": []
},
{
"title": "Anne Hall",
"tag": [
{
"name": "Movie",
"taglevel": 1,
"id": 1
},
{
"name": "Indie",
"taglevel": 2,
"id": 31
}
],
"info": []
}]

How to prevent duplicate data from showing

Hello!

Is there any way to prevent already selected tags from being shown in the suggestions ?

Regards!

Tags appearing outside of input field

I'm having an issue where the tags are being rendered outside of the input field instead of at the left hand side.

Here's the code that's rendering this

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReactTags from 'react-tag-autocomplete';

@connect(store => ({ tags: store.chapterModal.tags }))
export default class InputAC extends Component {

    handleDelete (i) {
        var tags = this.props.tags;
        tags.splice(i, 1);
        //this.setState({ tags: tags })
    }

    handleAddition (tag) {
        console.log(this.props);
        var tags = this.props.tags;
        tags.push(tag);
        //this.setState({ tags: tags })
    }

    render() {
        return (
            <div>
                <div>
                    <b>{this.props.question}</b>
                </div>
                <ReactTags
                    tags={this.props.tags}
                    suggestions={this.props.suggestions}
                    handleDelete={this.handleDelete.bind(this)}
                    handleAddition={this.handleAddition.bind(this)}
                    allowNew={true}
                    autoresize={false}/>
            </div>
        );
    }
}

I also refactored it to not use redux which can be seen here:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReactTags from 'react-tag-autocomplete';

@connect(store => ({ tags: store.chapterModal.tags }))
export default class InputAC extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tags: []
        };
    }

    handleDelete (i) {
        var tags = this.state.tags;
        tags.splice(i, 1);
        this.setState({ tags: tags })
    }

    handleAddition (tag) {
        var tags = this.state.tags;
        tags.push(tag);
        this.setState({ tags: tags })
    }

    render() {
        return (
            <div>
                <div>
                    <b>{this.props.question}</b>
                </div>
                <ReactTags
                    tags={this.state.tags}
                    suggestions={this.props.suggestions}
                    handleDelete={this.handleDelete.bind(this)}
                    handleAddition={this.handleAddition.bind(this)}
                    allowNew={true}
                    autoresize={false}/>
            </div>
        );
    }
}

And it yields the same result, not sure if this is a known issue/has something to do with the props passed into ReactTags

Submit Tag data inside of form

Hi,

I would like to pass the values created inside of tags inside of my form "submit".

My method from "input" works fine by using a "name=" and calling that name using "this.state"

However, the data never reaches when it is created inside of ReactTag

Can you please show me how to do this

  getInitialState() {
  return {
    tags: [],
    itemtitle: '',
    tagtitle: '',
    taglevel: '',
  };
  },
  handleAddition: function (tag) {
    var tags = this.state.tags
    tags.push(tag)
    this.setState({ tags: tags })
  },
  onChange(e) { 
    this.setState({[e.target.name]: e.target.value})
  },

  handleChange: function(event) {
    this.setState({itemtitle:event.target.itemtitle});
    this.setState({tagtitle: event.target.tagtitle});
    this.setState({tagname: event.target.tagname});
  },

  handleSubmit: function(e) {
    e.preventDefault();
     return fetch('http://localhost:8000/api/Data/', {
     method: 'POST',
     headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json'
     },
     body: JSON.stringify({
         title: this.state.itemtitle,
         tag:[
           {name:this.state.tagtitle} //HERE THERE CAN BE MULTIPLES
          ],
         info:[]
      })
      })
      .then(function(res){ return res.json(); })
      .then(function(data){ alert( JSON.stringify( data ) ) })
  },

  render: function() {
    return (
      <form onSubmit={this.handleSubmit}>
      <input
        name="itemtitle"
        placeholder="Item Title"
        type="text"
        onChange={this.onChange}
      />
      <ReactTags
        name="tagtitle"
        onChange={this.onChange}
        tags={this.state.tags}
        allowNew={true}
        handleAddition={this.handleAddition} 
        />
       <button type="submit">Submit</button>
      </form>
    );
  }
});```

V6

This is a catch-all issue tracking V6 changes and bug fixes.

• >= React 16 (#113)
• Remove autofocus option for a11y reasons
• Merge delimiters and delimiterChars options using KeyboardEvent.key
• event callbacks should be re-named from handleX to onX (#91)
• handleInputChange should be re-named onInput
• Make listBoxId configurable
• Support ES6 modules, pkg.module (#112)
• Refactor option filtering into top-level component (#115)
• Allow all text to be configurable (CC #154)
• Custom suggestion component (CC #117)
• Refactor class names out of state to avoid creating new objects on each prop change (#147)
• Remove clearInputOnDelete option and don't clear the input when deleting a tag (#155)

apparently keyCode is obsolete, and has been for a while

I just read through https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode which highlights that event.keyCode is actually obsolete and has been replaced by event.code instead, with https://w3c.github.io/uievents/#idl-keyboardeventinit having this to say:

Legacy keyboard event implementations include three additional attributes, keyCode, charCode, and which. The keyCode attribute indicates a numeric value associated with a particular key on a computer keyboard, while the charCode attribute indicates the ASCII value of the character associated with that key (which might be the same as the keyCode value) and is applicable only to keys that produce a character value.

In practice, keyCode and charCode are inconsistent across platforms and even the same implementation on different operating systems or using different localizations. This specification does not define values for either keyCode or charCode, or behavior for charCode. In conforming UI Events implementations, content authors can instead use key and code.

It might be necessary to update the code to make use of .code instead, in order to keep up with the DOM spec.

Language support

There is one problem. Hints do not work for Cyrillic
I will be happy if you add support for anothers languages

Warning: Accessing PropTypes via the main React package is deprecated.

Hello.
New version of React (15.5.0) throws the warning: Warning: Accessing PropTypes via the main React package is deprecated.

This is mentioned in their blog: https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html