React-React tags v6.8.0: A fantastically simple tagging component for your React projects

icon
Latest Release: v6.8.0

6.8.0 (2022-01-16)

Bug Fixes

  • remove onkeydown prop passed to RemoveComponent (#818) (665c559)

Features

Source code(tar.gz)
Source code(zip)

React-Tags

MIT NPM Version Dependency Status devDependency Status npm downloads build status Greenkeeper badge code style: prettier

React-tags is a simple tagging component ready to drop in your React projects. The component is inspired by GMail's To field in the compose window.

Features

  • Autocomplete based on a suggestion list
  • Keyboard friendly and mouse support
  • Reorder tags using drag and drop

Why

Because I was looking for an excuse to build a standalone component and publish it in the wild? To be honest, I needed a tagging component that provided the above features for my React-Surveyman project. Since I was unable to find one which met my requirements (and the fact that I generally enjoy re-inventing the wheel) this is what I came up with.

Demo

img

Check it out here

Installation

The preferred way of using the component is via NPM

npm install --save react-tag-input

make sure you have installed the peer dependencies as well with below versions

react: ^16.3.1,
react-dnd: ^5.0.0
react-dnd-html5-backend: ^3.0.2
react-dom": ^16.3.1

It is, however, also available to be used separately (dist/ReactTags.min.js). If you prefer this method remember to include ReactDND as a dependancy. Refer to the example to see how this works.

Usage

Here's a sample implementation that initializes the component with a list of initial tags and suggestions list. Apart from this, there are multiple events, handlers for which need to be set. For more details, go through the API.

import React from 'react';
import ReactDOM from 'react-dom';
import { WithContext as ReactTags } from 'react-tag-input';

const KeyCodes = {
  comma: 188,
  enter: 13,
};

const delimiters = [KeyCodes.comma, KeyCodes.enter];

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            tags: [
                { id: "Thailand", text: "Thailand" },
                { id: "India", text: "India" }
             ],
            suggestions: [
                { id: 'USA', text: 'USA' },
                { id: 'Germany', text: 'Germany' },
                { id: 'Austria', text: 'Austria' },
                { id: 'Costa Rica', text: 'Costa Rica' },
                { id: 'Sri Lanka', text: 'Sri Lanka' },
                { id: 'Thailand', text: 'Thailand' }
             ]
        };
        this.handleDelete = this.handleDelete.bind(this);
        this.handleAddition = this.handleAddition.bind(this);
        this.handleDrag = this.handleDrag.bind(this);
    }

    handleDelete(i) {
        const { tags } = this.state;
        this.setState({
         tags: tags.filter((tag, index) => index !== i),
        });
    }

    handleAddition(tag) {
        this.setState(state => ({ tags: [...state.tags, tag] }));
    }

    handleDrag(tag, currPos, newPos) {
        const tags = [...this.state.tags];
        const newTags = tags.slice();

        newTags.splice(currPos, 1);
        newTags.splice(newPos, 0, tag);

        // re-render
        this.setState({ tags: newTags });
    }

    render() {
        const { tags, suggestions } = this.state;
        return (
            <div>
                <ReactTags tags={tags}
                    suggestions={suggestions}
                    handleDelete={this.handleDelete}
                    handleAddition={this.handleAddition}
                    handleDrag={this.handleDrag}
                    delimiters={delimiters} />
            </div>
        )
    }
};

ReactDOM.render(<App />, document.getElementById('app'));

A note about Contexts One of the dependencies of this component is the react-dnd library. Since the 1.0 version, the original author has changed the API and requires the application using any draggable components to have a top-level backend context. So if you're using this component in an existing Application that uses React-DND you will already have a backend defined, in which case, you should require the component without the context.

const ReactTags = require('react-tag-input').WithOutContext;

Otherwise, you can simply import along with the backend itself (as shown above). If you have ideas to make this API better, I'd love to hear.

Options

Option Type Default Description
tags Array [] An array of tags that are displayed as pre-selected
suggestions Array [] An array of suggestions that are used as basis for showing suggestions
delimiters Array [ENTER, TAB] Specifies which characters should terminate tags input
placeholder String Add new tag The placeholder shown for the input
labelField String text Provide an alternative label property for the tags
handleAddition Function undefined Function called when the user wants to add a tag (required)
handleDelete Function undefined Function called when the user wants to delete a tag (required)
handleDrag Function undefined Function called when the user drags a tag
handleFilterSuggestions Function undefined Function called when filtering suggestions
handleTagClick Function undefined Function called when the user wants to know which tag was clicked
autofocus Boolean true Boolean value to control whether the text-input should be autofocused on mount
allowDeleteFromEmptyInput Boolean true Boolean value to control whether tags should be deleted when the 'Delete' key is pressed in an empty Input Box
handleInputChange Function undefined Event handler for input onChange
handleInputFocus Function undefined Event handler for input onFocus
handleInputBlur Function undefined Event handler for input onBlur
minQueryLength Number 2 How many characters are needed for suggestions to appear
removeComponent Boolean false Custom delete/remove tag element
autocomplete Boolean/Number false Ensure the first matching suggestion is automatically converted to a tag when a delimiter key is pressed
readOnly Boolean false Read-only mode without the input box and removeComponent and drag-n-drop features disabled
name String undefined The name attribute added to the input
id String undefined The id attribute added to the input
maxLength Number Infinity The maxLength attribute added to the input
inline Boolean true Render input field and selected tags in-line
inputFieldPosition String inline Specify position of input field relative to tags
allowUnique Boolean true Boolean value to control whether tags should be unqiue
allowDragDrop Boolean true Boolean value to control whether tags should have drag-n-drop features enabled
renderSuggestion Function undefined Render prop for rendering your own suggestions

tags (optional, defaults to [])

An array of tags that are displayed as pre-selected. Each tag should have an id property, property for the label, which is specified by the labelField and class for label, which is specified by className.

// With default labelField
const tags =  [ { id: "1", text: "Apples" } ]

// With labelField of `name`
const tags =  [ { id: "1", name: "Apples" } ]

// With className
const tags = [ { id: "1", text: "Apples", className: 'red'} ]

suggestions (optional, defaults to [])

An array of suggestions that are used as basis for showing suggestions. These objects should follow the same structure as the tags. So if the labelField is name, the following would work:

// With labelField of `name`
const suggestions = [
    { id: "1", name: "mango" },
    { id: "2", name: "pineapple"},
    { id: "3", name: "orange" },
    { id: "4", name: "pear" }
];

<a name="delimiters"></a>
##### delimiters (optional, defaults to `[ENTER, TAB]`)
Specifies which characters should terminate tags input. An array of character codes.

```js
const Keys = {
    TAB: 9,
    SPACE: 32,
    COMMA: 188,
};
<ReactTags
    delimiters={[Keys.TAB, Keys.SPACE, Keys.COMMA]}
 />

placeholder (optional, defaults to Add new tag)

The placeholder shown for the input.

let placeholder = "Add new country"

labelField (optional, defaults to text)

Provide an alternative label property for the tags.

<ReactTags
    tags={tags}
    suggestions={}
    labelField={'name'}
    handleDrag={}
 />

This is useful if your data uses the text property for something else.

handleAddition (required)

Function called when the user wants to add a tag (either a click, a tab press or carriage return)

function(tag) {
    // add the tag to the tag list
}

handleDelete (required)

Function called when the user wants to delete a tag

function(i) {
    // delete the tag at index i
}

handleDrag (optional)

If you want tags to be draggable, you need to provide this function. Function called when the user drags a tag.

function(tag, currPos, newPos) {
    // remove tag from currPos and add in newPos
}

handleFilterSuggestions (optional)

To assert control over the suggestions filter, you may contribute a function that is executed whenever a filtered set of suggestions is expected. By default, the text input value will be matched against each suggestion, and those that start with the entered text will be included in the filters suggestions list. If you do contribute a custom filter function, you must return an array of suggestions. Please do not mutate the passed suggestions array.

For example, if you prefer to override the default filter behavior and instead match any suggestions that contain the entered text anywhere in the suggestion, your handleFilterSuggestions property may look like this:

function(textInputValue, possibleSuggestionsArray) {
    var lowerCaseQuery = textInputValue.toLowerCase()

    return possibleSuggestionsArray.filter(function(suggestion)  {
        return suggestion.toLowerCase().includes(lowerCaseQuery)
    })
}

Note: The above custom filter uses String.prototype.includes, which was added to JavaScript as part of the ECMAScript 7 specification. If you need to support a browser that does not yet include support for this method, you will need to either refactor the above filter based on the capabilities of your supported browsers, or import a polyfill for String.prototype.includes.

handleTagClick (optional)

Function called when the user wants to know which tag was clicked

function(i) {
    // use the tag details at index i
}

autofocus (optional, defaults to true)

Optional boolean param to control whether the text-input should be autofocused on mount.

<ReactTags
    autofocus={false}
    ...>

allowDeleteFromEmptyInput (optional, defaults to true)

Optional boolean param to control whether tags should be deleted when the 'Delete' key is pressed in an empty Input Box.

<ReactTags
    allowDeleteFromEmptyInput={false}
    ...>

handleInputChange (optional)

Optional event handler for input onChange

<ReactTags
    handleInputChange={this.handleInputChange}
    ...>

handleInputFocus (optional)

Optional event handler for input onFocus

<ReactTags
    handleInputFocus={this.handleInputFocus}
    ...>

handleInputBlur (optional)

Optional event handler for input onBlur

<ReactTags
    handleInputBlur={this.handleInputBlur}
    ...>

minQueryLength (optional, defaults to 2)

How many characters are needed for suggestions to appear.

removeComponent (optional)

If you'd like to supply your own tag delete/remove element, create a React component and pass it as a property to ReactTags using the removeComponent option. By default, a simple anchor link with an "x" text node as its only child is rendered, but if you'd like to, say, replace this with a <button> element that uses an image instead of text, your markup may look something like this:

import {WithContext as ReactTags} from 'react-tag-input'

class Foo extends React.Component {
   render() {
      return <ReactTags removeComponent={RemoveComponent}/>
   }
}

class RemoveComponent extends React.Component {
   render() {
      return (
         <button {...this.props}>
            <img src="my-icon.png" />
         </button>
      )
   }
}

The "ReactTags__remove" className and onClick handler properties can be automatically included on the <button> by using the JSX spread attribute, as illustrated above.

autocomplete (optional, defaults to false)

Useful for enhancing data entry workflows for your users by ensuring the first matching suggestion is automatically converted to a tag when a delimiter key is pressed (such as the enter key). This option has three possible values:

  • true - when delimeter key (such as enter) is pressed, first matching suggestion is used.
  • 1 - when delimeter key (such as enter) is pressed, matching suggestion is used only if there is a single matching suggestion
  • false (default) - tags are not autocompleted on enter/delimiter

This option has no effect if there are no suggestions.

readOnly (optional, defaults to false)

Renders the component in read-only mode without the input box and removeComponent. This also disables the drag-n-drop feature.

name (optional)

The name attribute added to the input.

<ReactTags
    name = "inputName"
    ...>

id (optional)

The id attribute added to the input.

<ReactTags
    id = "inputId"
    ...>

maxLength (optional)

The maxLength attribute added to the input. Specifies the maximum number of characters allowed in the input field.

<ReactTags
    maxLength = "42"
    ...>

inline (optional, defaults to true)

The inline attributes decides whether the input fields and selected tags will be rendered in-line.

<ReactTags
    inline
    ...>

img

<ReactTags
    inline={false}
    ...>

img

This attribute is deprecated and will be removed in v7.x.x, see inputFieldPosition.

inputFieldPosition (optional, defaults to inline)

The inputFieldPosition attribute decides the positioning of the input field relative to the tags. Can be one of inline, top or bottom.

<ReactTags
    inputFieldPosition="inline"
    ...>

img

<ReactTags
    inputFieldPosition="top"
    ...>

img

<ReactTags
    inputFieldPosition="bottom"
    ...>

img

allowUnique (optional, defaults to true)

This prop controls whether tags should be unique.

allowDragDrop (optional, defaults to true)

This prop controls whether tags should have the drag-n-drop feature enabled.

renderSuggestion (optional)

This props allows to provide your own suggestion renderer and override the default one. It receives the suggestion and the query string as parameters. For example:

<ReactTags
    renderSuggestion = {({ text }, query) => <div style={{ textDecoration: 'underline', textDecorationStyle: 'wavy' }}>{text} ({ query })</div>}
    ...>

Styling

<ReactTags> does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. By default, the component provides the following classes with which you can style -

  • ReactTags__tags
  • ReactTags__tagInput
  • ReactTags__tagInputField
  • ReactTags__selected
  • ReactTags__selected ReactTags__tag
  • ReactTags__selected ReactTags__remove
  • ReactTags__suggestions
  • ReactTags__activeSuggestion

An example can be found in /example/reactTags.css.

If you need to set your own class names on the component, you may pass in a classNames prop.

  <ReactTags
    classNames={{
      tags: 'tagsClass',
      tagInput: 'tagInputClass',
      tagInputField: 'tagInputFieldClass',
      selected: 'selectedClass',
      tag: 'tagClass',
      remove: 'removeClass',
      suggestions: 'suggestionsClass',
      activeSuggestion: 'activeSuggestionClass'
    }}
    ...>

Dev

The component is written in ES6 and uses Webpack as its build tool.

Set up instructions

git clone [email protected]:prakhar1989/react-tags.git
cd react-tags
npm install
npm run precommit
npm run start

open http://localhost:8090/example

Contributing

Got ideas on how to make this better? Open an issue!

Thanks

The autocomplete dropdown is inspired by Lea Verou's awesomeplete library. The Drag and drop functionality is provided by Dan Abramov's insanely useful ReactDND library.

Also thanks to the awesome contributors who've made the library far better!

Comments

  • Install react-dnd and react-dnd-html5-backend to your package.json dependencies
    Install react-dnd and react-dnd-html5-backend to your package.json dependencies

    Sep 29, 2021

    Install react-dnd and react-dnd-html5-backend to your package.json dependencies, instead of devDependencies, so we don't have to worry about installing them.

    Saves users the extra steps.

    Reply
  • chore(deps-dev): bump webpack-bundle-analyzer from 3.9.0 to 4.5.0
    chore(deps-dev): bump webpack-bundle-analyzer from 3.9.0 to 4.5.0

    Oct 17, 2021

    Bumps webpack-bundle-analyzer from 3.9.0 to 4.5.0.

    Changelog

    Sourced from webpack-bundle-analyzer's changelog.

    4.5.0

    4.4.2

    • Bug Fix
      • Fix failure with compiler.outputFileSystem.constructor being undefined (#447 by @​kedarv and @​alexander-akait)
        • NOTE: This fix doesn't have added test coverage so the fix might break in future versions unless test coverage is added later.

    4.4.1

    4.4.0

    • Improvement

    • Bug Fix

      • Don't show an empty tooltip when hovering over the FoamTree attribution group or between top-level groups (#413 by @​stanislawosinski)
    • Internal

    4.3.0

    • Improvement

      • Replace express with builtin node server, reducing number of dependencies (#398 by @​TrySound)
      • Move filesize to dev dependencies, reducing number of dependencies (#401 by @​realityking)
    • Internal

    4.2.0

    • Improvement
      • A number of improvements to reduce the number of dependencies (#391, #396, #397)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    Reply
  • inputFieldPosition doesn't change position of input and tags
    inputFieldPosition doesn't change position of input and tags

    Oct 18, 2021

    Hi, I'm trying to change the position to inline but the tags remain above the input. Could someone help me with this issue?

    import React, {useState} from "react"; import { WithContext as ReactTags } from "react-tag-input";

    const KeyCodes = { comma: 188, enter: [10, 13], };

    const delimiters = [...KeyCodes.enter, KeyCodes.comma];

    const MuliTagInput: React.FC = (props) => { const [ tagsState, setTagsState ] = useState({ tags: [], });

    function handleDelete(i) {
        const { tags } = tagsState;
        setTagsState({
            tags: tags.filter((tag, index) => index !== i)
        });
    }
    
    function handleAddition(tag) {
        setTagsState(prev => ({
            tags: [...prev.tags, tag]
        }));
    }
    
    function handleDrag(tag, currPos, newPos) {
        const { tags } = tagsState;
        const newTags = tags.slice();
    
        newTags.splice(currPos, 1);
        newTags.splice(newPos, 0, tag);
    
        setTagsState({tags: newTags})
    }
    
    const { tags } = tagsState
    
    return (
        <div>
            <ReactTags
                placeholder="type here..."
                inputFieldPosition="inline"
                tags={tags}
                labelField="label"
                // suggestions={suggestions}
                handleDelete={handleDelete}
                handleAddition={handleAddition}
                handleDrag={handleDrag}
                delimiters={delimiters}
            />
        </div>
    );
    

    }

    export default MuliTagInput;

    bug 
    Reply
  • chore(deps-dev): bump css-loader from 5.2.6 to 6.5.1
    chore(deps-dev): bump css-loader from 5.2.6 to 6.5.1

    Nov 7, 2021

    Bumps css-loader from 5.2.6 to 6.5.1.

    Release notes

    Sourced from css-loader's releases.

    v6.5.1

    6.5.1 (2021-11-03)

    Bug Fixes

    • regression with unicode characters in locals (b7a8441)
    • runtime path generation (#1393) (feafea8)

    v6.5.0

    6.5.0 (2021-10-26)

    Features

    • support absolute URL in url() when experiments.buildHttp enabled (#1389) (8946be4)

    Bug Fixes

    • respect nosources in the devtool option (c60eff2)

    v6.4.0

    6.4.0 (2021-10-09)

    Features

    • generate more collision resistant for locals (c7db752)

    Bug Fixes

    • classes generation for client and server bundling (303a3a1)

    v6.3.0

    6.3.0 (2021-09-18)

    Features

    • added [folder] placeholder (a0dee4f)
    • added the exportType option with 'array', 'string' and 'css-style-sheet' values (c6d2066)
      • 'array' - the default export is Array with API for style-loader and other
      • 'string' - the default export is String you don't need to-string-loader loader anymore
      • 'css-style-sheet' - the default export is a constructable stylesheet, you can use import sheet from './styles.css' assert { type: 'css' }; like in a browser, more information you can find here
    • supported supports() and layer() functions in @import at-rules (#1377) (bce2c17)
    • fix multiple merging multiple @media at-rules (#1377) (bce2c17)

    ... (truncated)

    Changelog

    Sourced from css-loader's changelog.

    6.5.1 (2021-11-03)

    Bug Fixes

    • regression with unicode characters in locals (b7a8441)
    • runtime path generation (#1393) (feafea8)

    6.5.0 (2021-10-26)

    Features

    • support absolute URL in url() when experiments.buildHttp enabled (#1389) (8946be4)

    Bug Fixes

    • respect nosources in the devtool option (c60eff2)

    6.4.0 (2021-10-09)

    Features

    • generate more collision resistant for locals (c7db752)

    Bug Fixes

    • classes generation for client and server bundling (303a3a1)

    6.3.0 (2021-09-18)

    Features

    • added [folder] placeholder (a0dee4f)
    • added the exportType option with 'array', 'string' and 'css-style-sheet' values (c6d2066)
      • 'array' - the default export is Array with API for style-loader and other
      • 'string' - the default export is String you don't need to-string-loader loader anymore
      • 'css-style-sheet' - the default export is a constructable stylesheet, you can use import sheet from './styles.css' assert { type: 'css' }; like in a browser, more information you can find here
    • supported supports() and layer() functions in @import at-rules (#1377) (bce2c17)
    • fix multiple merging multiple @media at-rules (#1377) (bce2c17)

    Bug Fixes

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    Reply
  • Tag editable functionality not working
    Tag editable functionality not working

    Nov 16, 2021

    null

                                                                                                                                                                                                           
    Reply
  • chore(deps-dev): bump jsdom from 11.12.0 to 19.0.0
    chore(deps-dev): bump jsdom from 11.12.0 to 19.0.0

    Dec 5, 2021

    Bumps jsdom from 11.12.0 to 19.0.0.

    Release notes

    Sourced from jsdom's releases.

    Version 19.0.0

    • Changed jsdom.nodeLocation() to return undefined when used on nodes that originate via fragment parsing (e.g., via innerHTML). Previously it would return based on the node location of the fragment string, which made node locations unreliable with respect to the original document source. This restores the behavior that was present in v14.0.0, and was accidentally broken in v14.1.0. (bakkot)
    • Fixed calling window.close() inside the Window's load event to no longer crash. (MattiasBuelens)

    Version 18.1.1

    • Fixed connectedCallback to fire in situations involving document fragments, which was broken in v18.0.1. (GrantGryczan)

    Version 18.1.0

    • Fixed headers.append() and headers.set() to normalize values. (MattiasBuelens)
    • Fixed pageshow events to have bubbles: true and cancelable: true. (MattiasBuelens)
    • Implemented the reason property on AbortSignals, along with the corresponding reason argument to abortSignal.abort() and AbortSignal.abort(). (MattiasBuelens)

    Version 18.0.1

    • Fixed live Ranges to update correctly after calling node.normalize(). (hgiesel)
    • Fixed live Ranges to update correctly after removing child nodes. (hgiesel)
    • Fixed setting inputEl.valueAsDate = null to no longer throw an exception, but instead set the value to the empty string. (simon-weimann)
    • Improved performance of node insertion and node.contains(). (GrantGryczan)

    Version 18.0.0

    Potentially-breaking bug fixes:

    • Fixed SSL certificate checking for WebSocket connections. Previously, invalid SSL certificates were always accepted; now, they properly respect the ResourceLoader's strictSSL option (which defaults to true).
    • Changed the global in which almost all Promise and TypeError instances are created to be the jsdom global, not the Node.js global. This could affect any code that uses instanceof.

    Other changes:

    • Fixed moving an element between HTML and XML documents to reset the tagName cache, allowing it to return a lowercase value once it's in the XML document. (LucasLefevre)
    • Fixed form submission to not happen when the form is invalid. (pozil)

    Version 17.0.0

    Breaking change: Node v12 is now the minimum supported version.

    Version 16.7.0

    • Added AbortSignal.abort(). (ninevra)
    • Added dummy x and y properties to the return value of getBoundingClientRect(). (eiko)
    • Implemented wrapping for textareaEl.value if the wrap="" attribute is specified. (ninevra)
    • Changed newline normalization in <textarea>s according to recent HTML Standard updates. (ninevra)
    • Fixed some bad cascade computation in getComputedStyle(). (romain-trotard)

    Version 16.6.0

    • Added parentNode.replaceChildren(). (@​ninevra)
    • Fixed jsdom's handling of when code running inside the jsdom throws null or undefined as an exception. (@​mbest)
    • Removed the dependency on the deprecated request package, in the process fixing several issues with the XMLHttpRequest implementation around header processing. Thanks go to @​tobyhinloopen, @​andrewaylett, and especially @​vegardbb, for completing this months-long effort!

    Version 16.5.3

    • Fixed infinite recursion when using MutationObservers to observe elements inside a MutationObserver callback.

    Version 16.5.2

    • Fixed Access-Control-Allow-Headers: * to work with XMLHttpRequest. (silviot)
    • Fixed xhr.response to strip any leading BOM when xhr.responseType is "json".

    ... (truncated)

    Changelog

    Sourced from jsdom's changelog.

    19.0.0

    • Changed jsdom.nodeLocation() to return undefined when used on nodes that originate via fragment parsing (e.g., via innerHTML). Previously it would return based on the node location of the fragment string, which made node locations unreliable with respect to the original document source. This restores the behavior that was present in v14.0.0, and was accidentally broken in v14.1.0. (bakkot)
    • Fixed calling window.close() inside the Window's load event to no longer crash. (MattiasBuelens)

    18.1.1

    • Fixed connectedCallback to fire in situations involving document fragments, which was broken in v18.0.1. (GrantGryczan)

    18.1.0

    • Fixed headers.append() and headers.set() to normalize values. (MattiasBuelens)
    • Fixed pageshow events to have bubbles: true and cancelable: true. (MattiasBuelens)
    • Implemented the reason property on AbortSignals, along with the corresponding reason argument to abortSignal.abort() and AbortSignal.abort(). (MattiasBuelens)

    18.0.1

    • Fixed live Ranges to update correctly after calling node.normalize(). (hgiesel)
    • Fixed live Ranges to update correctly after removing child nodes. (hgiesel)
    • Fixed setting inputEl.valueAsDate = null to no longer throw an exception, but instead set the value to the empty string. (simon-weimann)
    • Improved performance of node insertion and node.contains(). (GrantGryczan)

    18.0.0

    Potentially-breaking bug fixes:

    • Fixed SSL certificate checking for WebSocket connections. Previously, invalid SSL certificates were always accepted; now, they properly respect the ResourceLoader's strictSSL option (which defaults to true).
    • Changed the global in which almost all Promise and TypeError instances are created to be the jsdom global, not the Node.js global. This could affect any code that uses instanceof.

    Other changes:

    • Fixed moving an element between HTML and XML documents to reset the tagName cache, allowing it to return a lowercase value once it's in the XML document. (LucasLefevre)
    • Fixed form submission to not happen when the form is invalid. (pozil)

    17.0.0

    Breaking change: Node v12 is now the minimum supported version.

    16.7.0

    • Added AbortSignal.abort(). (ninevra)
    • Added dummy x and y properties to the return value of getBoundingClientRect(). (eiko)
    • Implemented wrapping for textareaEl.value if the wrap="" attribute is specified. (ninevra)
    • Changed newline normalization in <textarea>s according to recent HTML Standard updates. (ninevra)
    • Fixed some bad cascade computation in getComputedStyle(). (romain-trotard)

    16.6.0

    • Added parentNode.replaceChildren(). (ninevra)
    • Fixed jsdom's handling of when code running inside the jsdom throws null or undefined as an exception. (mbest)

    ... (truncated)

    Commits
    • a604d67 Version 19.0.0
    • e46f76f Fix crash when calling window.close() inside load event listener
    • f9de3fd Do not track location information for fragment-parsed nodes
    • a61fdb8 Version 18.1.1
    • 15cbed6 Fix connectedCallback with document fragments
    • 79ff734 Version 18.1.0
    • a303721 Add AbortSignal's reason property
    • 158ada2 Update web platform tests + minor fixes
    • c98e0f5 Fix changelog username typo
    • b1ce1af Version 18.0.1
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    Reply
  • dependency error while installing the project locally
    dependency error while installing the project locally

    Dec 9, 2021

    Steps to reproduce

    clone cd react=tags npm i

    then got this following error

    image

    Reply
  • chore(deps-dev): bump jest from 22.4.4 to 27.4.7
    chore(deps-dev): bump jest from 22.4.4 to 27.4.7

    Jan 9, 2022

    Bumps jest from 22.4.4 to 27.4.7.

    Release notes

    Sourced from jest's releases.

    v27.4.7

    Fixes

    • jest-config Add missing @babel/core dependency (#12216)

    Full Changelog: https://github.com/facebook/jest/compare/v27.4.6...v27.4.7

    v27.4.6

    Fixes

    • [jest-environment-node] Add AbortSignal (#12157)
    • [jest-environment-node] Add Missing node global performance (#12002)
    • [jest-runtime] Handle missing mocked property (#12213)
    • [@jest/transform] Update dependency package pirates to 4.0.4 (#12002)

    Performance

    • jest-config perf: only register ts-node once when loading TS config files (#12160)

    New Contributors

    Full Changelog: https://github.com/facebook/jest/compare/v27.4.5...v27.4.6

    v27.4.5

    Fixes

    • [jest-worker] Stop explicitly passing process.env (#12141)

    New Contributors

    Full Changelog: https://github.com/facebook/jest/compare/v27.4.4...v27.4.5

    v27.4.4

    Fixes

    • [babel-jest] Add process.version chunk to the cache key (#12122)
    • [jest-environment] Add mocked to jest object (#12133)
    • [jest-worker] Stop explicitly passing execArgv (#12128)

    Chore & Maintenance

    • [website] Fix the card front that looks overlapping part of the card back

    ... (truncated)

    Changelog

    Sourced from jest's changelog.

    27.4.7

    Fixes

    • jest-config Add missing @babel/core dependency (#12216)

    27.4.6

    Fixes

    • [jest-environment-node] Add AbortSignal (#12157)
    • [jest-environment-node] Add Missing node global performance (#12002)
    • [jest-runtime] Handle missing mocked property (#12213)
    • [@jest/transform] Update dependency package pirates to 4.0.4 (#12002)

    Performance

    • jest-config perf: only register ts-node once when loading TS config files (#12160)

    27.4.5

    Fixes

    • [jest-worker] Stop explicitly passing process.env (#12141)

    27.4.4

    Fixes

    • [babel-jest] Add process.version chunk to the cache key (#12122)
    • [jest-environment] Add mocked to jest object (#12133)
    • [jest-worker] Stop explicitly passing execArgv (#12128)

    Chore & Maintenance

    • [website] Fix the card front that looks overlapping part of the card back

    27.4.3

    Fixes

    • [jest-environment-jsdom] Remove @types/jsdom dependency (and make its dom property private) (#12107)

    27.4.2

    Fixes

    • [jest-worker] Add additional execArgv to filter (#12103)

    27.4.1

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by simenb, a new releaser for jest since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    Reply
  • (fix) add missing required class selector prefix for scrolling active suggestion
    (fix) add missing required class selector prefix for scrolling active suggestion

    Jan 16, 2022

    The suggestion scrollTop feature isn't working because the querySelector API requires a selector prefix for classes (.).

    This was originally implemented in https://github.com/react-tags/react-tags/pull/93.

    Reply
  • chore(deps): bump nanoid from 3.1.23 to 3.2.0
    chore(deps): bump nanoid from 3.1.23 to 3.2.0

    Jan 21, 2022

    Bumps nanoid from 3.1.23 to 3.2.0.

    Changelog

    Sourced from nanoid's changelog.

    Change Log

    This project adheres to Semantic Versioning.

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).

    3.1.30

    • Reduced size for project with brotli compression (by Anton Khlynovskiy).

    3.1.29

    • Reduced npm package size.

    3.1.28

    • Reduced npm package size.

    3.1.27

    • Cleaned dependencies from development tools.

    3.1.26

    • Improved performance (by Eitan Har-Shoshanim).
    • Reduced npm package size.

    3.1.25

    • Fixed browserify support.

    3.1.24

    • Fixed browserify support (by Artur Paikin).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependencies 
    Reply
  • Update jest to the latest version 🚀
    Update jest to the latest version 🚀

    Sep 4, 2017

    Version 21.0.0 of jest just got published.

    Dependency jest
    Current Version 20.0.4
    Type devDependency

    The version 21.0.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of jest. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

    greenkeeper 
    Reply
  • Drag and Drop feature on the webpage got disabled once tag(s) is added
    Drag and Drop feature on the webpage got disabled once tag(s) is added

    May 28, 2021

    Hi, it's me again.

    I have realized one behavior on the react-tag-input component which is once a tag has been added, I could not drag and drop files into my webpage anymore (I have a react-dropzone Drag and Drop section on my screen).

    When I dragged my file(s) onto the screen, a "No Entry" symbol is shown besides my cursor instead of "+ Copy" label. I do not understand what is the factor which caused this. Can anyone please kindly advise.

    released 
    Reply
  • Add support for react-dnd 6+
    Add support for react-dnd 6+

    Jul 22, 2019

    With these dependendencies:

       "react": "^16.8.6",
        "react-dnd": "^9.3.2",
        "react-dnd-html5-backend": "^9.3.2",
        "react-dom": "^16.8.6",
        "react-tag-input": "^6.4.0",
    

    I'm getting:

    TypeError: (0 , _reactDnd.DragDropContext) is not a function
    ./node_modules/react-materialui-tags/dist-modules/components/ReactTags.js
    
    help wanted released 
    Reply
  • Update core-js to the latest version 🚀
    Update core-js to the latest version 🚀

    Oct 13, 2019

    The dependency core-js was updated from 2.6.10 to 3.3.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: zloirock License: MIT

    Find out more about this release.


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • Update eslint-plugin-jest to the latest version 🚀
    Update eslint-plugin-jest to the latest version 🚀

    Oct 27, 2019

    The devDependency eslint-plugin-jest was updated from 22.21.0 to 23.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: simenb License: MIT

    Release Notes for v23.0.0

    23.0.0 (2019-10-27)

    Bug Fixes

    • require-tothrow-message: rename rule to require-to-throw-message (#306) (53653c1), closes #296

    chore

    Features

    • support ignoreTypeOfDescribeName in valid-title (7dec202), closes #431

    BREAKING CHANGES

    • require-tothrow-message: Rename require-tothrow-message to require-to-throw-message
    • new rules added to recommended config
    • valid-describe no longer validates the title - use
      valid-title for that purpose
    • Minimum node version is now 8
    Commits

    The new version differs by 12 commits.

    • d2afda5 chore: remove travis
    • 53653c1 fix(require-tothrow-message): rename rule to require-to-throw-message (#306)
    • 14cb815 chore: update recommended config
    • 24ddc1b chore: move danger to GH action
    • 6de136a chore: test on both eslint 5 and 6
    • 7fafcd2 chore: generate changelog file as part of release
    • b9213e0 chore: update dependencies
    • 7dec202 feat: support ignoreTypeOfDescribeName in valid-title
    • 1275471 chore: move title type checking from valid-describe to valid-title
    • bb2d09e chore: merge no-empty-title into valid-title
    • 2ce233c chore: drop [email protected] support
    • a7ba3e4 chore: build next branch and PRs against next

    See the full diff


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • Update eslint-plugin-jest to the latest version 🚀
    Update eslint-plugin-jest to the latest version 🚀

    Jul 17, 2018

    Version 21.18.0 of eslint-plugin-jest was just published.

    Dependency eslint-plugin-jest
    Current Version 21.15.1
    Type devDependency

    The version 21.18.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of eslint-plugin-jest.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.


    Release Notes v21.18.0

    21.18.0 (2018-07-17)

    Features

    Commits

    The new version differs by 11 commits.

    • 5208173 chore(ci): attempt to add npm token
    • b5a13fd feat(rules): add prefer-inline-snapshots (#129)
    • 2b55a86 Create LICENSE
    • f605560 docs: clean up rules table links (#122)
    • e40113d chore(package): update to [email protected] (#120)
    • d7f3de3 feat: add fixer for lowercase-name rule (#119)
    • ca2d60b docs(readme): add no-jasmine-global to Readme (#117)
    • 885ce17 fix: handle callexpressions with anonymous calles
    • 7707e14 feat(rules): add no-jasmine-globals (#116)
    • 523e2f4 fix(rules): don't crash on require() (#115)
    • 4586bdc fix(valid-describe): allow concise body arrow function (#106)

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • Read only view
    Read only view

    Feb 22, 2016

    Is there a way to show the tags without the edit mode? Like i do not want to show a delete x or input field to add more tags. Just want to list my tags.

    Reply
  • Changes suggestions to use the provided labelField
    Changes suggestions to use the provided labelField

    May 3, 2018

    This pull request changes Suggestions to use the provided labelField instead of always using hardcoded .text property, so that the suggestions and tags don't have to be mapped differently.

    under Review 
    Reply
  • Update react-dnd to the latest version 🚀
    Update react-dnd to the latest version 🚀

    Jun 7, 2019

    There have been updates to the react-dnd monorepo:

    These versions are not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    This monorepo update includes releases of one or more dependencies which all belong to the react-dnd group definition.


    Find out more about this release.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • Update eslint-plugin-jest to the latest version 🚀
    Update eslint-plugin-jest to the latest version 🚀

    Mar 12, 2019

    The devDependency eslint-plugin-jest was updated from 22.1.3 to 22.3.1.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Release Notes for v22.3.1

    22.3.1 (2019-03-12)

    Bug Fixes

    • no-identical-title: not reporting when using backticks (#237) (4f8ef6d), closes #232
    Commits

    The new version differs by 13 commits.

    • 4f8ef6d fix(no-identical-title): not reporting when using backticks (#237)
    • 42d2d42 chore: refresh lockfile
    • 3a1dc2d chore(package): update to [email protected] (#228)
    • 6cd30a7 feat(rules): add prefer-called-with rule
    • a3edd21 fix: use range instead of start/end properties (#221)
    • 47e79c8 fix: dummy commit for release
    • d912a70 Revert "chore: add changelog to release process (#214)"
    • 332176d chore: fix typo
    • 924daed chore: add github semantic release plugin
    • 13b7c98 chore(release): 22.2.0 [skip ci]
    • 0933d82 feat(rules): add prefer-todo rule (#218)
    • 8dd5a80 chore: bump jest to v24 (#216)
    • 176832e chore: add changelog to release process (#214)

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply