├── .gitignore
├── .npmignore
├── spec
    ├── support
    │   └── jasmine.json
    ├── helpers
    │   └── dom.js
    └── ReactTags.spec.js
├── .editorconfig
├── lib
    ├── Tag.js
    ├── concerns
    │   ├── focusNextElement.js
    │   └── matchers.js
    ├── Suggestions.js
    ├── Input.js
    └── ReactTags.js
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
    └── workflows
    │   └── test.yml
├── rollup.config.js
├── LICENSE
├── example
    ├── rollup.config.js
    ├── main.js
    ├── countries.js
    ├── styles.css
    └── index.html
├── package.json
├── gh-pages.sh
├── CHANGELOG.md
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .nyc_output
3 | node_modules
4 | npm-debug.log
5 | dist
6 | example/bundle.js
7 | example/bundle.js.map
8 | coverage
9 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .git/
 2 | .github/
 3 | .nyc_output/
 4 | coverage/
 5 | example/
 6 | lib/
 7 | spec/
 8 | .DS_Store
 9 | .editorconfig
10 | gh-pages.sh
11 | rollup.config.js
12 | 


--------------------------------------------------------------------------------
/spec/support/jasmine.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "spec_dir": "spec",
 3 |   "spec_files": [
 4 |     "**/*.spec.js"
 5 |   ],
 6 |   "helpers": [
 7 |     "helpers/*.js"
 8 |   ],
 9 |   "stopSpecOnExpectationFailure": false,
10 |   "random": false
11 | }
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | trim_trailing_whitespace = true
 8 | indent_size = 2
 9 | indent_style = space
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/lib/Tag.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Tag (props) {
 4 |   return (
 5 |     <button type='button' className={props.classNames.selectedTag} title={props.removeButtonText} onClick={props.onDelete}>
 6 |       <span className={props.classNames.selectedTagName}>{props.tag.name}</span>
 7 |     </button>
 8 |   )
 9 | }
10 | 
11 | export default Tag
12 | 


--------------------------------------------------------------------------------
/lib/concerns/focusNextElement.js:
--------------------------------------------------------------------------------
 1 | export function focusNextElement (scope, currentTarget) {
 2 |   const interactiveEls = scope.querySelectorAll('a,button,input')
 3 | 
 4 |   const currentEl = Array.prototype.findIndex.call(
 5 |     interactiveEls,
 6 |     (element) => element === currentTarget
 7 |   )
 8 | 
 9 |   const nextEl = interactiveEls[currentEl - 1] || interactiveEls[currentEl + 1]
10 | 
11 |   if (nextEl) {
12 |     nextEl.focus()
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/lib/concerns/matchers.js:
--------------------------------------------------------------------------------
 1 | function escapeForRegExp (string) {
 2 |   return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
 3 | }
 4 | 
 5 | export function matchAny (string) {
 6 |   return new RegExp(escapeForRegExp(string), 'gi')
 7 | }
 8 | 
 9 | export function matchPartial (string) {
10 |   return new RegExp(`(?:^|\\s)${escapeForRegExp(string)}`, 'i')
11 | }
12 | 
13 | export function matchExact (string) {
14 |   return new RegExp(`^${escapeForRegExp(string)}$`, 'i')
15 | }
16 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | ## Describe the solution you'd like
11 | 
12 | A clear and concise description of what you want to happen.
13 | 
14 | ## Describe alternatives you've considered
15 | 
16 | A clear and concise description of any alternative solutions or features you've considered.
17 | 
18 | ## Additional context
19 | 
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/spec/helpers/dom.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | // Based on:
 4 | // <http://jaketrent.com/post/testing-react-with-jsdom/>
 5 | // <https://github.com/jesstelford/react-testing-mocha-jsdom>
 6 | 
 7 | const jsdom = require('jsdom')
 8 | 
 9 | const doc = '<html><body><div id="app"></div></body></html>'
10 | 
11 | const { window } = new jsdom.JSDOM(doc, {
12 |   url: 'http://localhost/'
13 | })
14 | 
15 | global.window = window
16 | 
17 | // from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80
18 | for (const key in window) {
19 |   if (!Object.prototype.hasOwnProperty.call(window, key)) {
20 |     continue
21 |   }
22 | 
23 |   if (key in global) {
24 |     continue
25 |   }
26 | 
27 |   global[key] = window[key]
28 | }
29 | 
30 | // A simple requestAnimationFrame shim which is required by React
31 | window.requestAnimationFrame = (callback) => {
32 |   setTimeout(callback, 0)
33 | }
34 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import buble from '@rollup/plugin-buble'
 2 | import pkg from './package.json'
 3 | 
 4 | const input = 'lib/ReactTags.js'
 5 | 
 6 | const external = [
 7 |   'react',
 8 |   'react-dom',
 9 |   'prop-types'
10 | ]
11 | 
12 | export default [
13 |   {
14 |     input,
15 |     external,
16 |     plugins: [
17 |       buble({ objectAssign: 'Object.assign', target: { ie: 11 } })
18 |     ],
19 |     output: {
20 |       name: 'ReactTags',
21 |       file: pkg.browser,
22 |       format: 'umd'
23 |     }
24 |   },
25 |   {
26 |     input,
27 |     external,
28 |     plugins: [
29 |       buble({ objectAssign: 'Object.assign', target: { node: 8 } })
30 |     ],
31 |     output: {
32 |       file: pkg.module,
33 |       format: 'es'
34 |     }
35 |   },
36 |   {
37 |     input,
38 |     external,
39 |     plugins: [
40 |       buble({ objectAssign: 'Object.assign', target: { node: 8 } })
41 |     ],
42 |     output: {
43 |       file: pkg.main,
44 |       format: 'cjs',
45 |       exports: 'default'
46 |     }
47 |   }
48 | ]
49 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 |   pull_request:
 9 |     branches:
10 |       - main
11 | 
12 | jobs:
13 |   build:
14 |     runs-on: ubuntu-latest
15 | 
16 |     strategy:
17 |       matrix:
18 |         node-version: [14.x, 16.x]
19 | 
20 |     steps:
21 |       - uses: actions/checkout@v2
22 | 
23 |       - name: Use Node.js ${{ matrix.node-version }}
24 |         uses: actions/setup-node@v3
25 |         with:
26 |           node-version: ${{ matrix.node-version }}
27 |           cache: 'npm'
28 | 
29 |       - name: Install
30 |         run: npm install
31 | 
32 |       - name: Lint and format
33 |         run: npm run lint
34 | 
35 |       - name: Build
36 |         run: npm run build
37 | 
38 |       - name: Test
39 |         run: npm run coverage
40 |       
41 |       - name: Prepare coverage report
42 |         run: npx nyc report --reporter=lcovonly
43 | 
44 |       - name: Send coverage report to Coveralls
45 |         uses: coverallsapp/github-action@master
46 |         with:
47 |           github-token: ${{ secrets.GITHUB_TOKEN }}


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: i-like-robots
 7 | 
 8 | ---
 9 | 
10 | Your issue may already be reported! Please search on the [issue tracker](../) before creating one.
11 | 
12 | ## Expected behaviour
13 | 
14 | A clear and concise description of what the bug is.
15 | 
16 | ## Current behaviour
17 | 
18 | A clear and concise description of what you expected to happen.
19 | 
20 | ## Steps to Reproduce
21 | 
22 | Steps to reproduce the problem:
23 | 
24 | 1. 
25 | 2. 
26 | 3. 
27 | 4. 
28 | 
29 | ## Example and screenshots
30 | 
31 | Please add a link to a minimal reproducible example of the bug if you have created one.
32 | 
33 | ## Screenshots
34 | 
35 | If applicable, add screenshots to help explain your problem.
36 | 
37 | ## Your environment
38 | 
39 |  - OS: [e.g. Windows 10]
40 |  - Browser: [e.g. chrome 76, safari 12]
41 |  - Version of the component: [e.g. 5.11.2]
42 |  - React version: [e.g. 16.12]
43 | 
44 | ## Additional context
45 | 
46 | Add any other useful context about the problem here.
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019 Matt Hinchliffe
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/example/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import buble from '@rollup/plugin-buble'
 2 | import serve from 'rollup-plugin-serve'
 3 | import replace from '@rollup/plugin-replace'
 4 | import commonjs from '@rollup/plugin-commonjs'
 5 | import resolve from '@rollup/plugin-node-resolve'
 6 | import { terser } from 'rollup-plugin-terser'
 7 | 
 8 | const plugins = [
 9 |   // Use Buble plugin to transpile JSX
10 |   buble({
11 |     objectAssign: 'Object.assign',
12 |     exclude: 'node_modules/**'
13 |   }),
14 |   // Use replace plugin to set environment variables
15 |   replace({
16 |     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
17 |   }),
18 |   // Use resolve plugin to use Node's module resolution algorithm
19 |   resolve(),
20 |   // Use CommonJS plugin to include non-ES modules
21 |   commonjs()
22 | ]
23 | 
24 | if (process.env.NODE_ENV === 'production') {
25 |   // Use Terser plugin to minify output
26 |   plugins.push(terser())
27 | } else {
28 |   plugins.push(serve({ open: true, contentBase: 'example', port: 8080 }))
29 | }
30 | 
31 | export default {
32 |   input: 'example/main.js',
33 |   plugins,
34 |   output: {
35 |     file: 'example/bundle.js',
36 |     format: 'iife',
37 |     sourcemap: true
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/lib/Suggestions.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { matchAny } from './concerns/matchers'
 3 | 
 4 | function markIt (name, query) {
 5 |   const regexp = matchAny(query)
 6 |   return name.replace(regexp, '<mark>$&</mark>')
 7 | }
 8 | 
 9 | function DefaultSuggestionComponent ({ item, query }) {
10 |   return (
11 |     <span dangerouslySetInnerHTML={{ __html: markIt(item.name, query) }} />
12 |   )
13 | }
14 | 
15 | function Suggestions (props) {
16 |   const SuggestionComponent = props.suggestionComponent || DefaultSuggestionComponent
17 | 
18 |   const options = props.options.map((item, index) => {
19 |     const key = `${props.id}-${index}`
20 |     const classNames = []
21 | 
22 |     if (props.index === index) {
23 |       classNames.push(props.classNames.suggestionActive)
24 |     }
25 | 
26 |     if (item.disabled) {
27 |       classNames.push(props.classNames.suggestionDisabled)
28 |     }
29 | 
30 |     return (
31 |       <li
32 |         id={key}
33 |         key={key}
34 |         role='option'
35 |         className={classNames.join(' ')}
36 |         aria-disabled={Boolean(item.disabled)}
37 |         onMouseDown={(e) => e.preventDefault()}
38 |         onClick={() => props.addTag(item)}
39 |       >
40 |         {item.prefix
41 |           ? <span className={props.classNames.suggestionPrefix}>{item.prefix}{' '}</span>
42 |           : null}
43 |         {item.disableMarkIt
44 |           ? item.name
45 |           : <SuggestionComponent item={item} query={props.query} />}
46 |       </li>
47 |     )
48 |   })
49 | 
50 |   return (
51 |     <div className={props.classNames.suggestions}>
52 |       <ul role='listbox' id={props.id}>{options}</ul>
53 |     </div>
54 |   )
55 | }
56 | 
57 | export default Suggestions
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-tag-autocomplete",
 3 |   "version": "6.3.0",
 4 |   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
 5 |   "main": "dist/ReactTags.cjs.js",
 6 |   "module": "dist/ReactTags.esm.js",
 7 |   "browser": "dist/ReactTags.umd.js",
 8 |   "scripts": {
 9 |     "prepare": "npm run build",
10 |     "prepublish": "npm run build",
11 |     "pretest": "npm run lint && npm run build",
12 |     "lint": "standard lib/*.js spec/*.js",
13 |     "test": "jasmine",
14 |     "coverage": "nyc --include 'dist/**' npm test",
15 |     "dev": "rollup --environment=NODE_ENV:development -c example/rollup.config.js --watch",
16 |     "example": "rollup --environment=NODE_ENV:production -c example/rollup.config.js",
17 |     "build": "rollup -c rollup.config.js"
18 |   },
19 |   "keywords": [
20 |     "react",
21 |     "tags",
22 |     "tag input",
23 |     "react-component",
24 |     "autosuggest",
25 |     "autocomplete"
26 |   ],
27 |   "author": "Matt Hinchliffe",
28 |   "contributors": [
29 |     "Prakhar Srivastav",
30 |     "Simon Hötten",
31 |     "Andre-John Mas",
32 |     "Mike Kamermans",
33 |     "Juliette Prétot",
34 |     "Andrew Pillsbury",
35 |     "Axel Niklasson",
36 |     "Serhiy Yefremenko",
37 |     "Paul Shannon",
38 |     "Herdis Maria",
39 |     "Sibiraj S",
40 |     "Cristina Lozano",
41 |     "Alexander Nestorov",
42 |     "Lars Haßler",
43 |     "Joel Posti"
44 |   ],
45 |   "license": "MIT",
46 |   "repository": "https://github.com/i-like-robots/react-tags",
47 |   "peerDependencies": {
48 |     "prop-types": "^15.5.0",
49 |     "react": "^16.5.0 || ^17.0.0",
50 |     "react-dom": "^16.5.0 || ^17.0.0"
51 |   },
52 |   "devDependencies": {
53 |     "@rollup/plugin-buble": "^0.21.0",
54 |     "@rollup/plugin-commonjs": "^22.0.0",
55 |     "@rollup/plugin-node-resolve": "^13.3.0",
56 |     "@rollup/plugin-replace": "^4.0.0",
57 |     "jasmine": "^4.2.0",
58 |     "jsdom": "^19.0.0",
59 |     "match-sorter": "^6.3.0",
60 |     "nyc": "^15.1.0",
61 |     "prop-types": "^15.7.2",
62 |     "react": "^16.13.0",
63 |     "react-dom": "^16.13.0",
64 |     "rollup": "^2.75.0",
65 |     "rollup-plugin-serve": "^1.1.0",
66 |     "rollup-plugin-terser": "^7.0.2",
67 |     "sinon": "^14.0.0",
68 |     "standard": "^17.0.0"
69 |   },
70 |   "engines": {
71 |     "node": ">= 10.0.0"
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useRef, useState } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import ReactTags from '../lib/ReactTags'
 4 | import suggestions from './countries'
 5 | 
 6 | /**
 7 |  * Demo 1 - Country selector
 8 |  */
 9 | 
10 | function CountrySelector () {
11 |   const [tags, setTags] = useState([])
12 | 
13 |   const reactTags = useRef()
14 | 
15 |   const onDelete = useCallback((tagIndex) => {
16 |     setTags(tags.filter((_, i) => i !== tagIndex))
17 |   }, [tags])
18 | 
19 |   const onAddition = useCallback((newTag) => {
20 |     setTags([...tags, newTag])
21 |   }, [tags])
22 | 
23 |   return (
24 |     <>
25 |       <p>Select the countries you have visited below:</p>
26 |       <ReactTags
27 |         ref={reactTags}
28 |         tags={tags}
29 |         suggestions={suggestions}
30 |         noSuggestionsText='No matching countries'
31 |         onDelete={onDelete}
32 |         onAddition={onAddition}
33 |       />
34 |       <p><b>Output:</b></p>
35 |       <pre><code>{JSON.stringify(tags, null, 2)}</code></pre>
36 |     </>
37 |   )
38 | }
39 | 
40 | ReactDOM.render(<CountrySelector />, document.getElementById('demo-1'))
41 | 
42 | /**
43 |  * Demo 2 - Custom tags
44 |  */
45 | 
46 | function CustomTags () {
47 |   const [tags, setTags] = useState([])
48 | 
49 |   const reactTags = useRef()
50 | 
51 |   const onDelete = useCallback((tagIndex) => {
52 |     setTags(tags.filter((_, i) => i !== tagIndex))
53 |   }, [tags])
54 | 
55 |   const onAddition = useCallback((newTag) => {
56 |     setTags([...tags, newTag])
57 |   }, [tags])
58 | 
59 |   const onValidate = useCallback((newTag) => {
60 |     return /^[a-z]{3,12}$/i.test(newTag.name)
61 |   })
62 | 
63 |   return (
64 |     <>
65 |       <p>Enter new tags meeting the requirements below:</p>
66 |       <ReactTags
67 |         allowNew
68 |         newTagText='Create new tag:'
69 |         ref={reactTags}
70 |         tags={tags}
71 |         suggestions={[]}
72 |         onDelete={onDelete}
73 |         onAddition={onAddition}
74 |         onValidate={onValidate}
75 |       />
76 |       <p style={{ margin: '0.25rem 0', color: 'gray' }}>
77 |         <small><em>Tags must be 3–12 characters in length and only contain the letters A-Z</em></small>
78 |       </p>
79 |       <p><b>Output:</b></p>
80 |       <pre><code>{JSON.stringify(tags, null, 2)}</code></pre>
81 |     </>
82 |   )
83 | }
84 | 
85 | ReactDOM.render(<CustomTags />, document.getElementById('demo-2'))
86 | 


--------------------------------------------------------------------------------
/lib/Input.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const SIZER_STYLES = {
 4 |   position: 'absolute',
 5 |   width: 0,
 6 |   height: 0,
 7 |   visibility: 'hidden',
 8 |   overflow: 'scroll',
 9 |   whiteSpace: 'pre'
10 | }
11 | 
12 | const STYLE_PROPS = [
13 |   'fontSize',
14 |   'fontFamily',
15 |   'fontWeight',
16 |   'fontStyle',
17 |   'letterSpacing',
18 |   'textTransform'
19 | ]
20 | 
21 | class Input extends React.Component {
22 |   constructor (props) {
23 |     super(props)
24 |     this.state = { inputWidth: null }
25 | 
26 |     this.input = React.createRef()
27 |     this.sizer = React.createRef()
28 |   }
29 | 
30 |   componentDidMount () {
31 |     if (this.props.autoresize) {
32 |       this.copyInputStyles()
33 |       this.updateInputWidth()
34 |     }
35 |   }
36 | 
37 |   componentDidUpdate ({ query, placeholderText }) {
38 |     if (query !== this.props.query || placeholderText !== this.props.placeholderText) {
39 |       this.updateInputWidth()
40 |     }
41 |   }
42 | 
43 |   copyInputStyles () {
44 |     const inputStyle = window.getComputedStyle(this.input.current)
45 | 
46 |     STYLE_PROPS.forEach((prop) => {
47 |       this.sizer.current.style[prop] = inputStyle[prop]
48 |     })
49 |   }
50 | 
51 |   updateInputWidth () {
52 |     let inputWidth
53 | 
54 |     if (this.props.autoresize) {
55 |       // scrollWidth is designed to be fast not accurate.
56 |       // +2 is completely arbitrary but does the job.
57 |       inputWidth = Math.ceil(this.sizer.current.scrollWidth) + 2
58 |     }
59 | 
60 |     if (inputWidth !== this.state.inputWidth) {
61 |       this.setState({ inputWidth })
62 |     }
63 |   }
64 | 
65 |   render () {
66 |     const { id, query, ariaLabelText, placeholderText, expanded, classNames, inputAttributes, inputEventHandlers, index } = this.props
67 | 
68 |     return (
69 |       <div className={classNames.searchWrapper}>
70 |         <input
71 |           {...inputAttributes}
72 |           {...inputEventHandlers}
73 |           ref={this.input}
74 |           value={query}
75 |           placeholder={placeholderText}
76 |           className={classNames.searchInput}
77 |           role='combobox'
78 |           aria-autocomplete='list'
79 |           aria-label={ariaLabelText || placeholderText}
80 |           aria-owns={id}
81 |           aria-activedescendant={index > -1 ? `${id}-${index}` : null}
82 |           aria-expanded={expanded}
83 |           style={{ width: this.state.inputWidth }}
84 |         />
85 |         <div ref={this.sizer} style={SIZER_STYLES}>{query || placeholderText}</div>
86 |       </div>
87 |     )
88 |   }
89 | }
90 | 
91 | export default Input
92 | 


--------------------------------------------------------------------------------
/example/countries.js:
--------------------------------------------------------------------------------
1 | const countries = ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Anguilla', 'Antigua & Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia & Herzegovina', 'Botswana', 'Brazil', 'British Virgin Islands', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Cape Verde', 'Cayman Islands', 'Chad', 'Chile', 'China', 'Colombia', 'Congo', 'Cook Islands', 'Costa Rica', 'Cote D Ivoire', 'Croatia', 'Cruise Ship', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Estonia', 'Ethiopia', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Polynesia', 'French West Indies', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Greece', 'Greenland', 'Grenada', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jersey', 'Jordan', 'Kazakhstan', 'Kenya', 'Kuwait', 'Kyrgyz Republic', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Mauritania', 'Mauritius', 'Mexico', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Montserrat', 'Morocco', 'Mozambique', 'Namibia', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Palestine', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russia', 'Rwanda', 'Saint Pierre & Miquelon', 'Samoa', 'San Marino', 'Satellite', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'South Africa', 'South Korea', 'Spain', 'Sri Lanka', 'St Kitts & Nevis', 'St Lucia', 'St Vincent', 'St. Lucia', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', "Timor L'Este", 'Togo', 'Tonga', 'Trinidad & Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks & Caicos', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States of America', 'Uruguay', 'Uzbekistan', 'Venezuela', 'Vietnam', 'Virgin Islands (US)', 'Yemen', 'Zambia', 'Zimbabwe']
2 | 
3 | module.exports = countries.map((name, id) => ({ id, name }))
4 | 


--------------------------------------------------------------------------------
/example/styles.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * <div class="react-tags">
  3 |  *   <div class="react-tags__selected">
  4 |  *     <button class="react-tags__selected-tag">
  5 |  *       <span class="react-tags__selected-tag-name" />
  6 |  *     </button>
  7 |  *   </div>
  8 |  *   <div class="react-tags__search">
  9 |  *     <div class="react-tags__search-wrapper">
 10 |  *       <input class="react-tags__search-input" />
 11 |  *       <div />
 12 |  *     </div>
 13 |  *     <div class="react-tags__suggestions">
 14 |  *       <ul>
 15 |  *         <li class="is-active">
 16 |  *           <mark />
 17 |  *         </li>
 18 |  *         <li class="is-disabled">
 19 |  *           <mark />
 20 |  *         </li>
 21 |  *       </ul>
 22 |  *     </div>
 23 |  *   </div>
 24 |  */
 25 | .react-tags {
 26 |   position: relative;
 27 |   padding: 6px 0 0 6px;
 28 |   border: 1px solid #D1D1D1;
 29 |   border-radius: 1px;
 30 | 
 31 |   /* shared font styles */
 32 |   font-size: 1em;
 33 |   line-height: 1.2;
 34 | 
 35 |   /* clicking anywhere will focus the input */
 36 |   cursor: text;
 37 | }
 38 | 
 39 | .react-tags.is-focused {
 40 |   border-color: #B1B1B1;
 41 | }
 42 | 
 43 | .react-tags__selected {
 44 |   display: inline;
 45 | }
 46 | 
 47 | .react-tags__selected-tag {
 48 |   display: inline-block;
 49 |   box-sizing: border-box;
 50 |   margin: 0 6px 6px 0;
 51 |   padding: 6px 8px;
 52 |   border: 1px solid #D1D1D1;
 53 |   border-radius: 2px;
 54 |   background: #F1F1F1;
 55 | 
 56 |   /* match the font styles */
 57 |   font-size: inherit;
 58 |   line-height: inherit;
 59 | }
 60 | 
 61 | .react-tags__selected-tag:after {
 62 |   content: '\2715';
 63 |   color: #AAA;
 64 |   margin-left: 8px;
 65 | }
 66 | 
 67 | .react-tags__selected-tag:hover,
 68 | .react-tags__selected-tag:focus {
 69 |   border-color: #B1B1B1;
 70 | }
 71 | 
 72 | .react-tags__search {
 73 |   display: inline-block;
 74 | 
 75 |   /* match tag layout */
 76 |   padding: 7px 2px;
 77 |   margin-bottom: 6px;
 78 | 
 79 |   /* prevent autoresize overflowing the container */
 80 |   max-width: 100%;
 81 | }
 82 | 
 83 | @media screen and (min-width: 30em) {
 84 | 
 85 |   .react-tags__search {
 86 |     /* this will become the offsetParent for suggestions */
 87 |     position: relative;
 88 |   }
 89 | 
 90 | }
 91 | 
 92 | .react-tags__search-input {
 93 |   /* prevent autoresize overflowing the container */
 94 |   max-width: 100%;
 95 | 
 96 |   /* remove styles and layout from this element */
 97 |   margin: 0;
 98 |   padding: 0;
 99 |   border: 0;
100 |   outline: none;
101 | 
102 |   /* match the font styles */
103 |   font-size: inherit;
104 |   line-height: inherit;
105 | }
106 | 
107 | .react-tags__search-input::-ms-clear {
108 |   display: none;
109 | }
110 | 
111 | .react-tags__suggestions {
112 |   position: absolute;
113 |   top: 100%;
114 |   left: 0;
115 |   width: 100%;
116 | }
117 | 
118 | @media screen and (min-width: 30em) {
119 | 
120 |   .react-tags__suggestions {
121 |     width: 240px;
122 |   }
123 | 
124 | }
125 | 
126 | .react-tags__suggestions ul {
127 |   margin: 4px -1px;
128 |   padding: 0;
129 |   list-style: none;
130 |   background: white;
131 |   border: 1px solid #D1D1D1;
132 |   border-radius: 2px;
133 |   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
134 | }
135 | 
136 | .react-tags__suggestions li {
137 |   border-bottom: 1px solid #ddd;
138 |   padding: 6px 8px;
139 | }
140 | 
141 | .react-tags__suggestions li mark {
142 |   text-decoration: underline;
143 |   background: none;
144 |   font-weight: 600;
145 | }
146 | 
147 | .react-tags__suggestions li:hover {
148 |   cursor: pointer;
149 |   background: #eee;
150 | }
151 | 
152 | .react-tags__suggestions li.is-active {
153 |   background: #b7cfe0;
154 | }
155 | 
156 | .react-tags__suggestions li.is-disabled {
157 |   opacity: 0.5;
158 |   cursor: auto;
159 | }
160 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |   <title>React Tags</title>
 8 | 
 9 |   <style>
10 |     body {
11 |       margin: 0;
12 |       font-size: 16px;
13 |       line-height: 22px;
14 |       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
15 |       font-kerning: normal;
16 |       color: #1F1F26;
17 |       text-rendering: optimizeLegibility;
18 |     }
19 | 
20 |     hr {
21 |       margin: 2rem 0;
22 |       border-width: 0;
23 |       border-top: 2px solid #E1E1E1;
24 |     }
25 | 
26 |     h1 {
27 |       margin: 0 0 2rem;
28 |       font-size: 3rem;
29 |       line-height: 3.75rem;
30 |     }
31 | 
32 |     h2 {
33 |       margin: 0 0 1rem;
34 |       font-size: 2rem;
35 |       line-height: 2.25rem;
36 |     }
37 | 
38 |     h3 {
39 |       margin: 0 0 0.5rem;
40 |       font-size: 1.2rem;
41 |     }
42 | 
43 |     p {
44 |       margin: 1.5rem 0;
45 |     }
46 | 
47 |     pre {
48 |       margin: 0;
49 |       color: #EAF2F1;
50 |       background: #282A3A;
51 |       font-family: monospace;
52 |     }
53 | 
54 |     pre > code {
55 |       display: block;
56 |       padding: 0.5rem;
57 |       font-size: 15px;
58 |       font-family: "Space Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
59 |     }
60 | 
61 |     .container {
62 |       width: 80%;
63 |       margin: 0 auto;
64 |       max-width: 960px;
65 |       min-width: 300px;
66 |       padding: 4rem 0;
67 |     }
68 |   </style>
69 | 
70 |   <link rel="stylesheet" href="styles.css">
71 | 
72 |   <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.findIndex"></script>
73 | </head>
74 | <body>
75 |   <div class="container">
76 |     <h1>React Tags</h1>
77 |     <p>A fantastically simple tagging component for your React projects. View <a href="https://github.com/i-like-robots/react-tags#readme">the readme on GitHub</a> for full installation and usage instructions and available options.</p>
78 |     <hr>
79 |     <h2>Demos</h2>
80 |     <h3>Country Selector</h3>
81 |     <div id="demo-1"></div>
82 |     <hr>
83 |     <h3>Custom tags</h3>
84 |     <div id="demo-2"></div>
85 |   </div>
86 | 
87 |   <script src="bundle.js"></script>
88 | 
89 |   <!-- http://tholman.com/github-corners/ -->
90 |   <a href="https://github.com/i-like-robots/react-tags" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
91 | </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/gh-pages.sh:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env bash
  2 | set -o errexit #abort if any command fails
  3 | 
  4 | deploy_directory=${GIT_DEPLOY_DIR:-example}
  5 | deploy_branch=${GIT_DEPLOY_BRANCH:-gh-pages}
  6 | 
  7 | #if no user identity is already set in the current git environment, use this:
  8 | default_username=${GIT_DEPLOY_USERNAME:-deploy.sh}
  9 | default_email=${GIT_DEPLOY_EMAIL:-}
 10 | 
 11 | #repository to deploy to. must be readable and writable.
 12 | repo=${GIT_DEPLOY_REPO:-origin}
 13 | 
 14 | # Parse arg flags
 15 | while : ; do
 16 |   if [[ $1 = "-v" || $1 = "--verbose" ]]; then
 17 |     verbose=true
 18 |     shift
 19 |   elif [[ $1 = "-s" || $1 = "--setup" ]]; then
 20 |     setup=true
 21 |     shift
 22 |   elif [[ $1 = "-e" || $1 = "--allow-empty" ]]; then
 23 |     allow_empty=true
 24 |     shift
 25 |   else
 26 |     break
 27 |   fi
 28 | done
 29 | 
 30 | #echo expanded commands as they are executed (for debugging)
 31 | function enable_expanded_output {
 32 |   if [ $verbose ]; then
 33 |     set -o xtrace
 34 |     set +o verbose
 35 |   fi
 36 | }
 37 | 
 38 | #this is used to avoid outputting the repo URL, which may contain a secret token
 39 | function disable_expanded_output {
 40 |   if [ $verbose ]; then
 41 |     set +o xtrace
 42 |     set -o verbose
 43 |   fi
 44 | }
 45 | 
 46 | enable_expanded_output
 47 | 
 48 | function set_user_id {
 49 |   if [[ -z `git config user.name` ]]; then
 50 |     git config user.name "$default_username"
 51 |   fi
 52 |   if [[ -z `git config user.email` ]]; then
 53 |     git config user.email "$default_email"
 54 |   fi
 55 | }
 56 | 
 57 | function restore_head {
 58 |   if [[ $previous_branch = "HEAD" ]]; then
 59 |     #we weren't on any branch before, so just set HEAD back to the commit it was on
 60 |     git update-ref --no-deref HEAD $commit_hash $deploy_branch
 61 |   else
 62 |     git symbolic-ref HEAD refs/heads/$previous_branch
 63 |   fi
 64 | 
 65 |   git reset --mixed
 66 | }
 67 | 
 68 | if ! git diff --exit-code --quiet --cached; then
 69 |   echo Aborting due to uncommitted changes in the index >&2
 70 |   exit 1
 71 | fi
 72 | 
 73 | commit_title=`git log -n 1 --format="%s" HEAD`
 74 | commit_hash=`git log -n 1 --format="%H" HEAD`
 75 | previous_branch=`git rev-parse --abbrev-ref HEAD`
 76 | 
 77 | if [ $setup ]; then
 78 |   mkdir -p "$deploy_directory"
 79 |   git --work-tree "$deploy_directory" checkout --orphan $deploy_branch
 80 |   git --work-tree "$deploy_directory" rm -r "*"
 81 |   git --work-tree "$deploy_directory" add --all
 82 |   git --work-tree "$deploy_directory" commit -m "initial publish"$'\n\n'"generated from commit $commit_hash"
 83 |   git push $repo $deploy_branch
 84 |   restore_head
 85 |   exit
 86 | fi
 87 | 
 88 | if [ ! -d "$deploy_directory" ]; then
 89 |   echo "Deploy directory '$deploy_directory' does not exist. Aborting." >&2
 90 |   exit 1
 91 | fi
 92 | 
 93 | if [[ -z `ls -A "$deploy_directory" 2> /dev/null` && -z $allow_empty ]]; then
 94 |   echo "Deploy directory '$deploy_directory' is empty. Aborting. If you're sure you want to deploy an empty tree, use the -e flag." >&2
 95 |   exit 1
 96 | fi
 97 | 
 98 | disable_expanded_output
 99 | git fetch --force $repo $deploy_branch:$deploy_branch
100 | enable_expanded_output
101 | 
102 | #make deploy_branch the current branch
103 | git symbolic-ref HEAD refs/heads/$deploy_branch
104 | 
105 | #put the previously committed contents of deploy_branch branch into the index
106 | git --work-tree "$deploy_directory" reset --mixed --quiet
107 | 
108 | git --work-tree "$deploy_directory" add --all
109 | 
110 | set +o errexit
111 | diff=$(git --work-tree "$deploy_directory" diff --exit-code --quiet HEAD)$?
112 | set -o errexit
113 | case $diff in
114 |   0) echo No changes to files in $deploy_directory. Skipping commit.;;
115 |   1)
116 |     set_user_id
117 |     git --work-tree "$deploy_directory" commit -m \
118 |       "publish: $commit_title"$'\n\n'"generated from commit $commit_hash"
119 | 
120 |     disable_expanded_output
121 |     #--quiet is important here to avoid outputting the repo URL, which may contain a secret token
122 |     git push --quiet $repo $deploy_branch
123 |     enable_expanded_output
124 |     ;;
125 |   *)
126 |     echo git diff exited with code $diff. Aborting. Staying on branch $deploy_branch so you can debug. To switch back to master, use: git symbolic-ref HEAD refs/heads/master && git reset --mixed >&2
127 |     exit $diff
128 |     ;;
129 | esac
130 | 
131 | restore_head
132 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | ## 6.3.0
  4 | 
  5 | - Added `clearSelectedIndex` method to programmatically clear the currently selected suggestion ([joelposti](https://github.com/joelposti))
  6 | ## 6.2.0
  7 | 
  8 | - Added `newTagText` option to display a prompt in the suggestions list to create a new tag when the `allowNew` option is enabled ([cml391](https://github.com/cml391))
  9 | - Refactored call of `onAddition` callback to always provide a new object instead of passing the selected tag by reference.
 10 | - Refactored `classNames` option to merge the provided prop with defaults ([alexandernst](https://github.com/alexandernst))
 11 | - Fixed updates to the `placeholder` option which did not recalculate input size ([LarsHassler](https://github.com/LarsHassler))
 12 | - Updated React peer dependency support to include 17+
 13 | - Updated example page with a new demo
 14 | 
 15 | ## 6.1.0
 16 | 
 17 | - Added `suggestionsTransform` option to allow custom filtering and sorting of suggestions ([sibiraj-s](https://github.com/sibiraj-s))
 18 | 
 19 | ## 6.0.0
 20 | 
 21 | - Added `clearInput` method to programmatically clear input text
 22 | - Added `suggestionComponent` option to allow the rendering of a custom suggestion component  ([tjphopkins](https://github.com/tjphopkins))
 23 | - Added `searchWrapper` to `classNames` option
 24 | - Added ES6 package and `"module"` entry point
 25 | - Added `id` option to configure the component ID
 26 | - Added `removeButtonText` option to configure the selected tag remove button title attribute
 27 | - Refactored `ariaLabel` option to `ariaLabelText` to match other text options
 28 | - Refactored `placeholder` option to `placeholderText` to match other text options
 29 | - Refactored keyboard event handlers to use `KeyboardEvent.key`
 30 | - Refactored event handlers and callbacks to use `on` prefixes
 31 | - Refactored `classNames` option to avoid creating new and merging objects for each top-level props change
 32 | - Refactored `deleteTag` method so it no longer clears the input text when a tag is removed
 33 | - Refactored `delimiters` option to be an array of `KeyboardEvent.key` values
 34 | - Refactored `onInput` callback to provide basic support for `delimiters` entered on soft keyboards
 35 | - Removed `clearInputOnDelete` option
 36 | - Removed `autofocus` option
 37 | - Removed `delimiterChars` option
 38 | - Updated React peer dependency to 16.5+
 39 | 
 40 | ## 5.13.1
 41 | 
 42 | - Fixed an issue where cursor focus could be lost after removing a selected tag
 43 | 
 44 | ## 5.13.0
 45 | 
 46 | - Added `ariaLabel` option ([Herdismaria](https://github.com/Herdismaria))
 47 | 
 48 | ## 5.12.1
 49 | 
 50 | - Fixed an issue where the `componentDidUpdate()` callback of the input component can be called too many times
 51 | 
 52 | ## 5.12.0
 53 | 
 54 | - Added `noSuggestionsText` option ([jraack](https://github.com/jraack))
 55 | 
 56 | ## 5.11.2
 57 | 
 58 | - Fixed an issue with the delimiter key logic which would attempt to add a previously selected suggestion even when it was no longer in the suggestion list.
 59 | 
 60 | ## 5.11.1
 61 | 
 62 | - Fixed an issue with suggestion highlighting when the entered query is blank
 63 | 
 64 | ## 5.11.0
 65 | 
 66 | - Added the current query as the second argument for the `suggestionsFilter` option
 67 | 
 68 | ## 5.10.0
 69 | 
 70 | - Added `suggestionsFilter` option ([paulshannon](https://github.com/paulshannon))
 71 | 
 72 | ## 5.9.0
 73 | 
 74 | - Added `clearInputOnDelete` option ([yefrem](https://github.com/yefrem))
 75 | 
 76 | ## 5.8.2
 77 | 
 78 | - Updated contents of package tarball to remove unnecessary files and decrease filesize
 79 | 
 80 | ## 5.8.1
 81 | 
 82 | - Removed unnecessary `componentWillReceiveProps()` method from input component
 83 | 
 84 | ## 5.8.0
 85 | 
 86 | - Added `handleValidate` option ([axelniklasson](https://github.com/axelniklasson))
 87 | 
 88 | ## 5.7.1
 89 | 
 90 | - Fixed missing `onChange` attribute warnings in development mode
 91 | 
 92 | ## 5.7.0
 93 | 
 94 | - Added `addOnBlur` option ([APILLSBURY](https://github.com/APILLSBURY) and [jedrzejiwanicki](https://github.com/jedrzejiwanicki))
 95 | 
 96 | ## 5.6.0
 97 | 
 98 | - Added `inputAttributes` option ([juliettepretot](https://github.com/juliettepretot))
 99 | 
100 | ## 5.5.0
101 | 
102 | - Refactored input into a controlled component (also fixes Preact compatibility)
103 | - Refactored focus and blur handlers to capture events (also fixes Preact compatibility)
104 | - Added `handleFocus` and `handleBlur` callbacks ([Pomax](https://github.com/Pomax))
105 | - Updated dependencies ([ajmas](https://github.com/ajmas))
106 | 
107 | ## 5.4.1
108 | 
109 | - Fixed return key submitting containing form when `minQueryLength` is set to 0 and suggestions are active ([Drahoslav7](https://github.com/Drahoslav7))
110 | 
111 | ## 5.4.0
112 | 
113 | - Added `delimiters` property to override keyboard codes for picking suggestions ([Pomax](https://github.com/Pomax))
114 | 
115 | ## 5.3.0
116 | 
117 | - Updated component compatibility with React v15.5 which silences deprecation warnings
118 | - Refactored examples code away from `createClass` to ES6 syntax
119 | 
120 | ## 5.2.0
121 | 
122 | - Add `allowBackspace` option to disable the ability to delete the selected tags when backspace is pressed while focussed on the text input
123 | - Refactors `updateInputWidth` method to update when any props change ([@joekrill](https://github.com/joekrill))
124 | 
125 | ## 5.1.0
126 | 
127 | - Added `tagComponent` option to allow the rendering of a custom tag component
128 | 
129 | ## 5.0.4
130 | 
131 | - Fixed cursor focus being lost when clicking a suggestion
132 | 
133 | ## 5.0.3
134 | 
135 | - Fixed word boundary regex restricting suggestions to ascii characters
136 | 
137 | ## 5.0.2
138 | 
139 | - Fixed unescaped queries throwing an exception when being converted to regexp
140 | 
141 | ## 5.0.1
142 | 
143 | - Fixed `maxSuggestionsLength` not being passed to suggestions component
144 | 
145 | ## 5.0.0
146 | 
147 | - Removed `delimiters` option
148 | - Added support for jsnext entry point
149 | - Removed functionality to hide suggestions list when escape is pressed
150 | - Added functionality to hide suggestions list when input is blurred
151 | - Added class name to component root when input is focused
152 | - Refactored components to ES6 class syntax and stateless functions
153 | - Refactored components to use Standard code style
154 | - Refactored `classNames` option to better match usage and use BEM naming convention
155 | 
156 | ## 4.3.1
157 | 
158 | - Fixed React semver that was too tight
159 | 
160 | ## 4.3.0
161 | 
162 | - Updated to support React 15.0.0
163 | 
164 | ## 4.2.0
165 | 
166 | - Added `allowNew` option
167 | - Fixed incorrect partial matches when adding a tag
168 | 
169 | ## 4.1.1
170 | 
171 | - Fixed mising index from active descendent attribute
172 | 
173 | ## 4.1.0
174 | 
175 | - Added `classNames` option
176 | 
177 | ## 4.0.2
178 | 
179 | - Fixed missing `type` attribute from tag buttons
180 | 
181 | ## 4.0.1
182 | 
183 | - Fixed out of date dist package
184 | 
185 | ## 4.0.0
186 | 
187 | - Removed `busy` option and status indicator
188 | - Added `maxSuggestionsLength` option
189 | 


--------------------------------------------------------------------------------
/lib/ReactTags.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import Tag from './Tag'
  4 | import Input from './Input'
  5 | import Suggestions from './Suggestions'
  6 | import { matchExact, matchPartial } from './concerns/matchers'
  7 | import { focusNextElement } from './concerns/focusNextElement'
  8 | 
  9 | const KEYS = {
 10 |   ENTER: 'Enter',
 11 |   TAB: 'Tab',
 12 |   BACKSPACE: 'Backspace',
 13 |   UP_ARROW: 'ArrowUp',
 14 |   UP_ARROW_COMPAT: 'Up',
 15 |   DOWN_ARROW: 'ArrowDown',
 16 |   DOWN_ARROW_COMPAT: 'Down'
 17 | }
 18 | 
 19 | const CLASS_NAMES = {
 20 |   root: 'react-tags',
 21 |   rootFocused: 'is-focused',
 22 |   selected: 'react-tags__selected',
 23 |   selectedTag: 'react-tags__selected-tag',
 24 |   selectedTagName: 'react-tags__selected-tag-name',
 25 |   search: 'react-tags__search',
 26 |   searchWrapper: 'react-tags__search-wrapper',
 27 |   searchInput: 'react-tags__search-input',
 28 |   suggestions: 'react-tags__suggestions',
 29 |   suggestionActive: 'is-active',
 30 |   suggestionDisabled: 'is-disabled',
 31 |   suggestionPrefix: 'react-tags__suggestion-prefix'
 32 | }
 33 | 
 34 | function findMatchIndex (options, query) {
 35 |   return options.findIndex((option) => matchExact(query).test(option.name))
 36 | }
 37 | 
 38 | function pressDelimiter () {
 39 |   if (this.state.query.length >= this.props.minQueryLength) {
 40 |     // Check if the user typed in an existing suggestion.
 41 |     const match = findMatchIndex(this.state.options, this.state.query)
 42 |     const index = this.state.index === -1 ? match : this.state.index
 43 |     const tag = index > -1 ? this.state.options[index] : null
 44 | 
 45 |     if (tag) {
 46 |       this.addTag(tag)
 47 |     } else if (this.props.allowNew) {
 48 |       this.addTag({ name: this.state.query })
 49 |     }
 50 |   }
 51 | }
 52 | 
 53 | function pressUpKey (e) {
 54 |   e.preventDefault()
 55 | 
 56 |   // if first item, cycle to the bottom
 57 |   const size = this.state.options.length - 1
 58 |   this.setState({ index: this.state.index <= 0 ? size : this.state.index - 1 })
 59 | }
 60 | 
 61 | function pressDownKey (e) {
 62 |   e.preventDefault()
 63 | 
 64 |   // if last item, cycle to top
 65 |   const size = this.state.options.length - 1
 66 |   this.setState({ index: this.state.index >= size ? 0 : this.state.index + 1 })
 67 | }
 68 | 
 69 | function pressBackspaceKey () {
 70 |   // when backspace key is pressed and query is blank, delete the last tag
 71 |   if (!this.state.query.length) {
 72 |     this.deleteTag(this.props.tags.length - 1)
 73 |   }
 74 | }
 75 | 
 76 | function defaultSuggestionsFilter (item, query) {
 77 |   const regexp = matchPartial(query)
 78 |   return regexp.test(item.name)
 79 | }
 80 | 
 81 | function getOptions (props, state) {
 82 |   let options
 83 | 
 84 |   if (props.suggestionsTransform) {
 85 |     options = props.suggestionsTransform(state.query, props.suggestions)
 86 |   } else {
 87 |     options = props.suggestions.filter((item) => props.suggestionsFilter(item, state.query))
 88 |   }
 89 | 
 90 |   options = options.slice(0, props.maxSuggestionsLength)
 91 | 
 92 |   if (props.allowNew && props.newTagText && findMatchIndex(options, state.query) === -1) {
 93 |     options.push({ id: 0, name: state.query, prefix: props.newTagText, disableMarkIt: true })
 94 |   } else if (props.noSuggestionsText && options.length === 0) {
 95 |     options.push({ id: 0, name: props.noSuggestionsText, disabled: true, disableMarkIt: true })
 96 |   }
 97 | 
 98 |   return options
 99 | }
100 | 
101 | class ReactTags extends React.Component {
102 |   constructor (props) {
103 |     super(props)
104 | 
105 |     this.state = {
106 |       query: '',
107 |       focused: false,
108 |       index: -1
109 |     }
110 | 
111 |     this.inputEventHandlers = {
112 |       // Provide a no-op function to the input component to avoid warnings
113 |       // <https://github.com/i-like-robots/react-tags/issues/135>
114 |       // <https://github.com/facebook/react/issues/13835>
115 |       onChange: () => {},
116 |       onBlur: this.onBlur.bind(this),
117 |       onFocus: this.onFocus.bind(this),
118 |       onInput: this.onInput.bind(this),
119 |       onKeyDown: this.onKeyDown.bind(this)
120 |     }
121 | 
122 |     this.container = React.createRef()
123 |     this.input = React.createRef()
124 |   }
125 | 
126 |   onInput (e) {
127 |     const query = e.target.value
128 | 
129 |     if (this.props.onInput) {
130 |       this.props.onInput(query)
131 |     }
132 | 
133 |     // NOTE: This test is a last resort for soft keyboards and browsers which do not
134 |     // support `KeyboardEvent.key`.
135 |     // <https://bugs.chromium.org/p/chromium/issues/detail?id=763559>
136 |     // <https://bugs.chromium.org/p/chromium/issues/detail?id=118639>
137 |     if (
138 |       query.length === this.state.query.length + 1 &&
139 |       this.props.delimiters.indexOf(query.slice(-1)) > -1
140 |     ) {
141 |       pressDelimiter.call(this)
142 |     } else if (query !== this.state.query) {
143 |       this.setState({ query })
144 |     }
145 |   }
146 | 
147 |   onKeyDown (e) {
148 |     // when one of the terminating keys is pressed, add current query to the tags
149 |     if (this.props.delimiters.indexOf(e.key) > -1) {
150 |       if (this.state.query || this.state.index > -1) {
151 |         e.preventDefault()
152 |       }
153 | 
154 |       pressDelimiter.call(this)
155 |     }
156 | 
157 |     // when backspace key is pressed and query is blank, delete the last tag
158 |     if (e.key === KEYS.BACKSPACE && this.props.allowBackspace) {
159 |       pressBackspaceKey.call(this, e)
160 |     }
161 | 
162 |     if (e.key === KEYS.UP_ARROW || e.key === KEYS.UP_ARROW_COMPAT) {
163 |       pressUpKey.call(this, e)
164 |     }
165 | 
166 |     if (e.key === KEYS.DOWN_ARROW || e.key === KEYS.DOWN_ARROW_COMPAT) {
167 |       pressDownKey.call(this, e)
168 |     }
169 |   }
170 | 
171 |   onClick (e) {
172 |     if (document.activeElement !== e.target) {
173 |       this.focusInput()
174 |     }
175 |   }
176 | 
177 |   onBlur () {
178 |     this.setState({ focused: false, index: -1 })
179 | 
180 |     if (this.props.onBlur) {
181 |       this.props.onBlur()
182 |     }
183 | 
184 |     if (this.props.addOnBlur) {
185 |       pressDelimiter.call(this)
186 |     }
187 |   }
188 | 
189 |   onFocus () {
190 |     this.setState({ focused: true })
191 | 
192 |     if (this.props.onFocus) {
193 |       this.props.onFocus()
194 |     }
195 |   }
196 | 
197 |   onDeleteTag (index, event) {
198 |     // Because we'll destroy the element with cursor focus we need to ensure
199 |     // it does not get lost and move it to the next interactive element
200 |     if (this.container.current) {
201 |       focusNextElement(this.container.current, event.currentTarget)
202 |     }
203 | 
204 |     this.deleteTag(index)
205 |   }
206 | 
207 |   addTag (tag) {
208 |     if (tag.disabled) {
209 |       return
210 |     }
211 | 
212 |     if (typeof this.props.onValidate === 'function' && !this.props.onValidate(tag)) {
213 |       return
214 |     }
215 | 
216 |     this.props.onAddition({ id: tag.id, name: tag.name })
217 | 
218 |     this.clearInput()
219 |   }
220 | 
221 |   deleteTag (i) {
222 |     this.props.onDelete(i)
223 |   }
224 | 
225 |   clearInput () {
226 |     this.setState({
227 |       query: '',
228 |       index: -1
229 |     })
230 |   }
231 | 
232 |   clearSelectedIndex () {
233 |     this.setState({ index: -1 })
234 |   }
235 | 
236 |   focusInput () {
237 |     if (this.input.current && this.input.current.input.current) {
238 |       this.input.current.input.current.focus()
239 |     }
240 |   }
241 | 
242 |   render () {
243 |     const TagComponent = this.props.tagComponent || Tag
244 | 
245 |     const expanded = this.state.focused && this.state.query.length >= this.props.minQueryLength
246 |     const classNames = Object.assign({}, CLASS_NAMES, this.props.classNames)
247 |     const rootClassNames = [classNames.root]
248 | 
249 |     this.state.focused && rootClassNames.push(classNames.rootFocused)
250 | 
251 |     return (
252 |       <div ref={this.container} className={rootClassNames.join(' ')} onClick={this.onClick.bind(this)}>
253 |         <div
254 |           className={classNames.selected}
255 |           aria-relevant='additions removals'
256 |           aria-live='polite'
257 |         >
258 |           {this.props.tags.map((tag, i) => (
259 |             <TagComponent
260 |               key={i}
261 |               tag={tag}
262 |               removeButtonText={this.props.removeButtonText}
263 |               classNames={classNames}
264 |               onDelete={this.onDeleteTag.bind(this, i)}
265 |             />
266 |           ))}
267 |         </div>
268 |         <div className={classNames.search}>
269 |           <Input
270 |             {...this.state}
271 |             id={this.props.id}
272 |             ref={this.input}
273 |             classNames={classNames}
274 |             inputAttributes={this.props.inputAttributes}
275 |             inputEventHandlers={this.inputEventHandlers}
276 |             autoresize={this.props.autoresize}
277 |             expanded={expanded}
278 |             placeholderText={this.props.placeholderText}
279 |             ariaLabelText={this.props.ariaLabelText}
280 |           />
281 |           {expanded && this.state.options.length
282 |             ? <Suggestions
283 |                 {...this.state}
284 |                 id={this.props.id}
285 |                 classNames={classNames}
286 |                 expanded={expanded}
287 |                 addTag={this.addTag.bind(this)}
288 |                 suggestionComponent={this.props.suggestionComponent}
289 |               />
290 |             : null}
291 |         </div>
292 |       </div>
293 |     )
294 |   }
295 | 
296 |   static getDerivedStateFromProps (props, state) {
297 |     if (state.prevQuery !== state.query || state.prevSuggestions !== props.suggestions) {
298 |       return {
299 |         prevQuery: state.query,
300 |         prevSuggestions: props.suggestions,
301 |         options: getOptions(props, state)
302 |       }
303 |     }
304 | 
305 |     return null
306 |   }
307 | }
308 | 
309 | ReactTags.defaultProps = {
310 |   id: 'ReactTags',
311 |   tags: [],
312 |   placeholderText: 'Add new tag',
313 |   removeButtonText: 'Click to remove tag',
314 |   noSuggestionsText: null,
315 |   newTagText: null,
316 |   suggestions: [],
317 |   suggestionsFilter: defaultSuggestionsFilter,
318 |   suggestionsTransform: null,
319 |   autoresize: true,
320 |   classNames: CLASS_NAMES,
321 |   delimiters: [KEYS.TAB, KEYS.ENTER],
322 |   minQueryLength: 2,
323 |   maxSuggestionsLength: 6,
324 |   allowNew: false,
325 |   allowBackspace: true,
326 |   addOnBlur: false,
327 |   tagComponent: null,
328 |   suggestionComponent: null,
329 |   inputAttributes: {}
330 | }
331 | 
332 | ReactTags.propTypes = {
333 |   id: PropTypes.string,
334 |   tags: PropTypes.arrayOf(PropTypes.object),
335 |   placeholderText: PropTypes.string,
336 |   ariaLabelText: PropTypes.string,
337 |   removeButtonText: PropTypes.string,
338 |   noSuggestionsText: PropTypes.string,
339 |   newTagText: PropTypes.string,
340 |   suggestions: PropTypes.arrayOf(PropTypes.object),
341 |   suggestionsFilter: PropTypes.func,
342 |   suggestionsTransform: PropTypes.func,
343 |   autoresize: PropTypes.bool,
344 |   delimiters: PropTypes.arrayOf(PropTypes.string),
345 |   onDelete: PropTypes.func.isRequired,
346 |   onAddition: PropTypes.func.isRequired,
347 |   onInput: PropTypes.func,
348 |   onFocus: PropTypes.func,
349 |   onBlur: PropTypes.func,
350 |   onValidate: PropTypes.func,
351 |   minQueryLength: PropTypes.number,
352 |   maxSuggestionsLength: PropTypes.number,
353 |   classNames: PropTypes.object,
354 |   allowNew: PropTypes.bool,
355 |   allowBackspace: PropTypes.bool,
356 |   addOnBlur: PropTypes.bool,
357 |   tagComponent: PropTypes.oneOfType([
358 |     PropTypes.func,
359 |     PropTypes.element
360 |   ]),
361 |   suggestionComponent: PropTypes.oneOfType([
362 |     PropTypes.func,
363 |     PropTypes.element
364 |   ]),
365 |   inputAttributes: PropTypes.object
366 | }
367 | 
368 | export default ReactTags
369 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Tag Autocomplete
  2 | 
  3 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/i-like-robots/react-tags/blob/main/LICENSE) ![build status](https://github.com/i-like-robots/react-tags/actions/workflows/test.yml/badge.svg?branch=main) [![Coverage Status](https://coveralls.io/repos/github/i-like-robots/react-tags/badge.svg?branch=main)](https://coveralls.io/github/i-like-robots/react-tags?branch=main) [![npm version](https://img.shields.io/npm/v/react-tag-autocomplete/legacy.svg?style=flat)](https://www.npmjs.com/package/react-tag-autocomplete)
  4 | 
  5 | React Tag Autocomplete is a simple tagging component ready to drop in your React projects. Originally based on the [React Tags project](http://prakhar.me/react-tags/example) by Prakhar Srivastav this version removes the drag-and-drop re-ordering functionality, adds appropriate roles and ARIA states and introduces a resizing text input. [View demo](http://i-like-robots.github.io/react-tags/).
  6 | 
  7 | ![Screenshot of React Tag Autocomplete](https://cloud.githubusercontent.com/assets/271645/25478773/54aa2bbe-2b3a-11e7-95cf-d419f3c24418.png)
  8 | 
  9 | **_Please note:_ This repository is for v6 and older versions of this component. For later releases, compatible with React v18+, please go to [the new repository](https://github.com/i-like-robots/react-tag-autocomplete).**
 10 | 
 11 | ## Installation
 12 | 
 13 | This is a [Node.js] module available through the [npm] registry. Before installing, download and install Node.js.
 14 | 
 15 | Installation is done using the [npm install] command:
 16 | 
 17 | ```
 18 | npm install --save react-tag-autocomplete@legacy
 19 | ```
 20 | 
 21 | [Node.js]: https://nodejs.org/en/
 22 | [npm]: https://www.npmjs.com/
 23 | [npm install]: https://docs.npmjs.com/getting-started/installing-npm-packages-locally
 24 | 
 25 | ## Usage
 26 | 
 27 | Here's a sample implementation that initializes the component with an empty list of `tags` and a pre-populated list of `suggestions`. For further customization details, see [options](#options).
 28 | 
 29 | ```js
 30 | import React, { useCallback, useRef, useState } from 'react'
 31 | import ReactTags from 'react-tag-autocomplete'
 32 | 
 33 | function App () {
 34 |   const [tags, setTags] = useState([])
 35 | 
 36 |   const [suggestions, setSuggestions] = useState([
 37 |     { id: 1, name: "Apples" },
 38 |     { id: 2, name: "Pears" },
 39 |     { id: 3, name: "Bananas" },
 40 |     { id: 4, name: "Mangos" },
 41 |     { id: 5, name: "Lemons" },
 42 |     { id: 6, name: "Apricots" }
 43 |   ])
 44 | 
 45 |   const reactTags = useRef()
 46 | 
 47 |   const onDelete = useCallback((tagIndex) => {
 48 |     setTags(tags.filter((_, i) => i !== tagIndex))
 49 |   }, [tags])
 50 | 
 51 |   const onAddition = useCallback((newTag) => {
 52 |     setTags([...tags, newTag])
 53 |   }, [tags])
 54 | 
 55 |   return (
 56 |     <ReactTags
 57 |       ref={reactTags}
 58 |       tags={tags}
 59 |       suggestions={suggestions}
 60 |       onDelete={onDelete}
 61 |       onAddition={onAddition}
 62 |     />
 63 |   )
 64 | }
 65 | ```
 66 | 
 67 | ### Options
 68 | 
 69 | - [`id`](#id-optional)
 70 | - [`tags`](#tags-optional)
 71 | - [`suggestions`](#suggestions-optional)
 72 | - [`suggestionsFilter`](#suggestionsfilter-optional)
 73 | - [`suggestionsTransform`](#suggestionsTransform-optional)
 74 | - [`placeholderText`](#placeholdertext-optional)
 75 | - [`ariaLabelText`](#arialabeltext-optional)
 76 | - [`removeButtonText`](#removeButtontext-optional)
 77 | - [`noSuggestionsText`](#noSuggestionsText-optional)
 78 | - [`newTagText`](#newtagtext-optional)
 79 | - [`autoresize`](#autoresize-optional)
 80 | - [`delimiters`](#delimiters-optional)
 81 | - [`minQueryLength`](#minquerylength-optional)
 82 | - [`maxSuggestionsLength`](#maxsuggestionslength-optional)
 83 | - [`classNames`](#classnames-optional)
 84 | - [`onAddition`](#onaddition-required)
 85 | - [`onDelete`](#ondelete-required)
 86 | - [`onInput`](#oninput-optional)
 87 | - [`onFocus`](#onfocus-optional)
 88 | - [`onBlur`](#onblur-optional)
 89 | - [`onValidate`](#onvalidate-optional)
 90 | - [`addOnBlur`](#addonblur-optional)
 91 | - [`allowNew`](#allownew-optional)
 92 | - [`allowBackspace`](#allowbackspace-optional)
 93 | - [`tagComponent`](#tagcomponent-optional)
 94 | - [`suggestionComponent`](#suggestioncomponent-optional)
 95 | - [`inputAttributes`](#inputAttributes-optional)
 96 | 
 97 | #### id (optional)
 98 | 
 99 | The ID attribute given to the listbox element. Default: `ReactTags`.
100 | 
101 | #### tags (optional)
102 | 
103 | An array of selected tags. Each tag is an object which must have an `id` and a `name` property. Defaults to `[]`.
104 | 
105 | ```js
106 | const tags =  [
107 |   { id: 1, name: 'Apples' },
108 |   { id: 2, name: 'Pears' }
109 | ]
110 | ```
111 | 
112 | #### suggestions (optional)
113 | 
114 | An array of tag suggestions. Each suggestion is an object which must have an `id` and a `name` property and an optional `disabled` property to make the suggestion non-selectable. Defaults to `[]`.
115 | 
116 | ```js
117 | const suggestions = [
118 |   { id: 3, name: 'Bananas' },
119 |   { id: 4, name: 'Mangos' },
120 |   { id: 5, name: 'Lemons' },
121 |   { id: 6, name: 'Apricots', disabled: true }
122 | ]
123 | ```
124 | 
125 | #### suggestionsFilter (optional)
126 | 
127 | A callback function to filter suggestion items with. The callback receives two arguments; a `suggestion` and the current `query` and must return a boolean value.
128 | 
129 | If no function is supplied the default filter is applied. Defaults to `null`.
130 | 
131 | **Note:** This filter will be ignored if [suggestionsTransform](#suggestionsTransform-optional) is supplied.
132 | 
133 | #### suggestionsTransform (optional)
134 | 
135 | A callback function to apply a custom filter to the suggestions. The callback receives two arguments; a `query` and the input [suggestions](#suggestions-optional) and must return a new array of suggestion items. Using this option you can filter and sort suggestions.
136 | 
137 | **Note:** This will supersede [suggestionsFilter](#suggestionsfilter-optional) in future.
138 | 
139 | ```js
140 | import matchSorter from "match-sorter";
141 | 
142 | function suggestionsFilter(query, suggestions) {
143 |   return matchSorter(suggestions, query, { keys: ["name"] });
144 | }
145 | ```
146 | 
147 | #### placeholderText (optional)
148 | 
149 | The placeholder string shown for the input. Defaults to `'Add new tag'`.
150 | 
151 | #### ariaLabelText (optional)
152 | 
153 | The aria-label string for the input. Defaults to placeholder string.
154 | 
155 | #### removeButtonText (optional)
156 | 
157 | The title text to add to the remove selected tag button. Default `'Click to remove tag'`.
158 | 
159 | #### noSuggestionsText (optional)
160 | 
161 | Message shown if there are no matching suggestions. Defaults to `null`.
162 | 
163 | #### newTagText (optional)
164 | 
165 | Enables users to show a prompt to add a new tag at the bottom of the suggestions list if `allowNew` is enabled. Defaults to `null`.
166 | 
167 | #### autoresize (optional)
168 | 
169 | Boolean parameter to control whether the text-input should be automatically resized to fit its value. Defaults to `true`.
170 | 
171 | #### delimiters (optional)
172 | 
173 | Array of keys matching `KeyboardEvent.key` values. When a corresponding key is pressed it will trigger tag selection or creation. Defaults to `['Enter', 'Tab']`.
174 | 
175 | #### minQueryLength (optional)
176 | 
177 | Minimum query length required to show the suggestions list. Defaults to `2`.
178 | 
179 | #### maxSuggestionsLength (optional)
180 | 
181 | Maximum number of suggestions to display. Defaults to `6`.
182 | 
183 | #### classNames (optional)
184 | 
185 | Override the default class names used by the component. Defaults to:
186 | 
187 | ```js
188 | {
189 |   root: 'react-tags',
190 |   rootFocused: 'is-focused',
191 |   selected: 'react-tags__selected',
192 |   selectedTag: 'react-tags__selected-tag',
193 |   selectedTagName: 'react-tags__selected-tag-name',
194 |   search: 'react-tags__search',
195 |   searchWrapper: 'react-tags__search-wrapper',
196 |   searchInput: 'react-tags__search-input',
197 |   suggestions: 'react-tags__suggestions',
198 |   suggestionActive: 'is-active',
199 |   suggestionDisabled: 'is-disabled',
200 |   suggestionPrefix: 'react-tags__suggestion-prefix'
201 | }
202 | ```
203 | 
204 | #### onAddition (required)
205 | 
206 | Function called when the user wants to add a tag. Receives the tag.
207 | 
208 | ```js
209 | const [tags, setTags] = useState([])
210 | 
211 | function onAddition (newTag) {
212 |   setTags([...tags, newTag])
213 | }
214 | ```
215 | 
216 | #### onDelete (required)
217 | 
218 | Function called when the user wants to delete a tag. Receives the tag index.
219 | 
220 | ```js
221 | const [tags, setTags] = useState([])
222 | 
223 | function onDelete (tagIndex) {
224 |   setTags(tags.filter((_, i) => i !== tagIndex))
225 | }
226 | ```
227 | 
228 | #### onInput (optional)
229 | 
230 | Optional event handler when the input value changes. Receives the current query.
231 | 
232 | ```js
233 | const [isBusy, setIsBusy] = useState(false)
234 | 
235 | function onInput (query) {
236 |   if (!isBusy) {
237 |     setIsBusy(true)
238 | 
239 |     return fetch(`?query=${query}`).then((result) => {
240 |       setIsBusy(false)
241 |     })
242 |   }
243 | }
244 | ```
245 | 
246 | #### onFocus (optional)
247 | 
248 | Optional callback function for when the input receives focus. Receives no arguments.
249 | 
250 | #### onBlur (optional)
251 | 
252 | Optional callback function for when focus on the input is lost. Receives no arguments.
253 | 
254 | #### onValidate (optional)
255 | 
256 | Optional validation function that determines if tag should be added. Receives the tag object and must return a boolean.
257 | 
258 | ```js
259 | function onValidate (tag) {
260 |   return tag.name.length >= 5;
261 | }
262 | ```
263 | 
264 | #### addOnBlur (optional)
265 | 
266 | Creates a tag from the current input value when focus on the input is lost. Defaults to `false`.
267 | 
268 | #### allowNew (optional)
269 | 
270 | Enable users to add new (not suggested) tags. Defaults to `false`.
271 | 
272 | #### allowBackspace (optional)
273 | 
274 | Enable users to delete selected tags when backspace is pressed while focussed on the text input when empty. Defaults to `true`.
275 | 
276 | #### tagComponent (optional)
277 | 
278 | Provide a custom tag component to render. Receives the tag, button text, and delete callback as props. Defaults to `null`.
279 | 
280 | ```jsx
281 | function TagComponent ({ tag, removeButtonText, onDelete }) {
282 |   return (
283 |     <button type='button' title={`${removeButtonText}: ${tag.name}`} onClick={onDelete}>
284 |       {tag.name}
285 |     </button>
286 |   )
287 | }
288 | ```
289 | 
290 | #### suggestionComponent (optional)
291 | 
292 | Provide a custom suggestion component to render. Receives the suggestion and current query as props. Defaults to `null`.
293 | 
294 | ```jsx
295 | function SuggestionComponent ({ item, query }) {
296 |   return (
297 |     <span id={item.id} className={item.name === query ? 'match' : 'no-match'}>
298 |       {item.name}
299 |     </span>
300 |   )
301 | }
302 | ```
303 | 
304 | #### inputAttributes (optional)
305 | 
306 | An object containing additional attributes that will be applied to the text input. _Please note_ that this prop cannot overwrite existing attributes, it can only add new ones. Defaults to `{}`.
307 | 
308 | 
309 | ### API
310 | 
311 | By adding a `ref` to any instances of this component you can access its API methods.
312 | 
313 | #### `addTag(tag)`
314 | 
315 | Adds a tag to the list of selected tags. This will trigger the validation and addition callbacks.
316 | 
317 | #### `deleteTag(index)`
318 | 
319 | Removes a tag from the list of selected tags. This will trigger the delete callback.
320 | 
321 | #### `clearInput()`
322 | 
323 | Clears the input, current query and selected suggestion.
324 | 
325 | #### `clearSelectedIndex()`
326 | 
327 | Clears the currently selected suggestion.
328 | 
329 | #### `focusInput()`
330 | 
331 | Sets cursor focus to the text input element.
332 | 
333 | ### Styling
334 | 
335 | It is possible to customize the appearance of the component, the included styles found in `/example/styles.css` are only an example.
336 | 
337 | 
338 | ### Development
339 | 
340 | The component is written in ES6 and uses [Rollup](https://rollupjs.org/) as its build tool. Tests are written with [Jasmine](https://jasmine.github.io/) using [JSDOM](https://github.com/jsdom/jsdom).
341 | 
342 | ```sh
343 | npm install
344 | npm run dev # will open http://localhost:8080 and watch files for changes
345 | ```
346 | 
347 | ### Upgrading
348 | 
349 | To see all changes refer to [the changelog](CHANGELOG.md).
350 | 
351 | #### Upgrading from 5.x to 6.x
352 | 
353 | - React 16.5 or above is now required.
354 | - Event handlers and callbacks have been renamed to use `on` prefixes, e.g. the `handleAddition()` callback should now be called `onAddition()`.
355 | - The `delimiters` option is now an array of `KeyboardEvent.key` values and not `KeyboardEvent.keyCode` codes, e.g. `[13, 9]` should now be written as `['Enter', 'Tab']`. See https://keycode.info/ for more information.
356 | - The `placeholder` option has been renamed `placeholderText`
357 | - The `ariaLabel` option has been renamed `ariaLabelText`
358 | - The `delimiterChars` option has been removed, use the `delimiters` option instead.
359 | - The `clearInputOnDelete` option has been removed and is now the default behaviour
360 | - The `autofocus` option has been removed.
361 | 


--------------------------------------------------------------------------------
/spec/ReactTags.spec.js:
--------------------------------------------------------------------------------
  1 | /* eslint-env jasmine */
  2 | 
  3 | 'use strict'
  4 | 
  5 | const React = require('react')
  6 | const ReactDOM = require('react-dom')
  7 | const TestUtils = require('react-dom/test-utils')
  8 | const sinon = require('sinon')
  9 | const { matchSorter } = require('match-sorter')
 10 | 
 11 | const fixture = require('../example/countries')
 12 | const Subject = require('../')
 13 | 
 14 | let props
 15 | let instance
 16 | 
 17 | function createInstance (data = {}, teardown = true) {
 18 |   if (teardown && instance) {
 19 |     teardownInstance()
 20 |   }
 21 | 
 22 |   const defaults = {
 23 |     tags: [],
 24 |     suggestions: [],
 25 |     onBlur: sinon.stub(),
 26 |     onFocus: sinon.stub(),
 27 |     onDelete: sinon.stub(),
 28 |     onAddition: sinon.stub(),
 29 |     onInput: sinon.stub()
 30 |   }
 31 | 
 32 |   props = Object.assign(defaults, data)
 33 | 
 34 |   // eslint-disable-next-line react/no-render-return-value
 35 |   instance = ReactDOM.render(
 36 |     React.createElement(Subject, props),
 37 |     document.getElementById('app')
 38 |   )
 39 | }
 40 | 
 41 | function teardownInstance () {
 42 |   ReactDOM.unmountComponentAtNode(document.getElementById('app'))
 43 |   instance = null
 44 | }
 45 | 
 46 | function $ (selector) {
 47 |   return document.querySelector(selector)
 48 | }
 49 | 
 50 | function $$ (selector) {
 51 |   return Array.from(document.querySelectorAll(selector))
 52 | }
 53 | 
 54 | function type (value) {
 55 |   $('input').focus()
 56 | 
 57 |   value.split('').forEach((char) => {
 58 |     key(char)
 59 |     $('input').value += char
 60 |     // React calls oninput for every value change to maintain state at all times
 61 |     TestUtils.Simulate.input($('input'))
 62 |   })
 63 | }
 64 | 
 65 | function key () {
 66 |   Array.from(arguments).forEach((value) => {
 67 |     TestUtils.Simulate.keyDown($('input'), { value, key: value })
 68 |   })
 69 | }
 70 | 
 71 | function click (target) {
 72 |   TestUtils.Simulate.mouseDown(target)
 73 |   TestUtils.Simulate.mouseUp(target)
 74 |   TestUtils.Simulate.click(target)
 75 | }
 76 | 
 77 | describe('React Tags', () => {
 78 |   afterEach(() => {
 79 |     teardownInstance()
 80 |   })
 81 | 
 82 |   describe('basic rendering', () => {
 83 |     beforeEach(() => {
 84 |       createInstance()
 85 |     })
 86 | 
 87 |     it('renders the basic components', () => {
 88 |       expect($('.react-tags')).toBeTruthy()
 89 |       expect($('.react-tags__selected')).toBeTruthy()
 90 |       expect($('.react-tags__search')).toBeTruthy()
 91 |       expect($('.react-tags__search-input')).toBeTruthy()
 92 |     })
 93 |   })
 94 | 
 95 |   describe('input', () => {
 96 |     it('assigns the given placeholder', () => {
 97 |       createInstance({ placeholderText: 'Please enter a tag' })
 98 | 
 99 |       expect($('input').getAttribute('placeholder')).toEqual('Please enter a tag')
100 |       expect($('input').getAttribute('aria-label')).toEqual('Please enter a tag')
101 |     })
102 | 
103 |     it('updates state when suggestions list is expanded', () => {
104 |       createInstance()
105 | 
106 |       const input = $('input')
107 | 
108 |       expect(input.getAttribute('aria-expanded')).toEqual('false')
109 | 
110 |       type('uni')
111 | 
112 |       expect(input.getAttribute('aria-expanded')).toEqual('true')
113 | 
114 |       TestUtils.Simulate.blur(input)
115 | 
116 |       expect(input.getAttribute('aria-expanded')).toEqual('false')
117 |     })
118 | 
119 |     it('decorates the component root when focused', () => {
120 |       createInstance()
121 | 
122 |       TestUtils.Simulate.focus($('input'))
123 |       expect($('.is-focused')).toBeTruthy()
124 | 
125 |       TestUtils.Simulate.blur($('input'))
126 |       expect($('.is-focused')).toBeNull()
127 |     })
128 | 
129 |     it('calls focus and blur callbacks when provided', () => {
130 |       createInstance()
131 | 
132 |       TestUtils.Simulate.focus($('input'))
133 |       sinon.assert.calledOnce(props.onFocus)
134 | 
135 |       TestUtils.Simulate.blur($('input'))
136 |       sinon.assert.calledOnce(props.onBlur)
137 |     })
138 | 
139 |     it('can be cleared programmatically', () => {
140 |       createInstance()
141 | 
142 |       type('foo')
143 | 
144 |       expect(instance.state.query.length).toBe(3)
145 | 
146 |       instance.clearInput()
147 | 
148 |       expect(instance.state.query.length).toBe(0)
149 |     })
150 |   })
151 | 
152 |   describe('query', () => {
153 |     const query = 'united'
154 | 
155 |     beforeEach(() => {
156 |       createInstance()
157 |     })
158 | 
159 |     it('updates the internal state', () => {
160 |       type(query)
161 |       expect(instance.state.query).toEqual(query)
162 |     })
163 | 
164 |     it('triggers the change callback', () => {
165 |       type(query)
166 | 
167 |       sinon.assert.called(props.onInput)
168 |       sinon.assert.calledWith(props.onInput, query)
169 |     })
170 | 
171 |     it('can allow new, non-suggested tags to be added', () => {
172 |       createInstance({ allowNew: false })
173 | 
174 |       type(query); key('Enter')
175 | 
176 |       sinon.assert.notCalled(props.onAddition)
177 | 
178 |       createInstance({ allowNew: true })
179 | 
180 |       type(query); key('Enter')
181 | 
182 |       sinon.assert.calledOnce(props.onAddition)
183 |       sinon.assert.calledWith(props.onAddition, sinon.match({ name: query }))
184 |     })
185 | 
186 |     it('can add new tags when a delimiter character is entered', () => {
187 |       createInstance({ allowNew: true, delimiters: ['Enter', ',', ';'] })
188 | 
189 |       type('foo,bar;baz'); key('Enter')
190 | 
191 |       sinon.assert.calledThrice(props.onAddition)
192 |     })
193 | 
194 |     it('only adds tags which pass the provided onValidate function', () => {
195 |       createInstance({ allowNew: true, onValidate: sinon.stub().returns(false), delimiters: ['Enter', ','] })
196 |       type('foo,bar,baz'); key('Enter')
197 |       sinon.assert.notCalled(props.onAddition)
198 | 
199 |       createInstance({ allowNew: true, onValidate: sinon.stub().returns(true), delimiters: ['Enter', ','] })
200 |       type('foo,bar,baz'); key('Enter')
201 |       sinon.assert.calledThrice(props.onAddition)
202 |     })
203 | 
204 |     it('adds tag on blur when addOnBlur is true', () => {
205 |       createInstance({ allowNew: true, addOnBlur: true })
206 | 
207 |       type(query)
208 | 
209 |       TestUtils.Simulate.blur($('input'))
210 | 
211 |       sinon.assert.calledOnce(props.onAddition)
212 |       sinon.assert.calledWith(props.onAddition, sinon.match({ name: query }))
213 |     })
214 |   })
215 | 
216 |   describe('suggestions', () => {
217 |     const query = 'united'
218 | 
219 |     beforeEach(() => {
220 |       createInstance({ minQueryLength: 3, suggestions: fixture })
221 |     })
222 | 
223 |     it('shows suggestions list when the query is long enough', () => {
224 |       type(query.slice(0, 2))
225 |       expect($('ul[role="listbox"]')).toBeNull()
226 | 
227 |       type(query.slice(2, 3))
228 |       expect($('ul[role="listbox"]')).toBeTruthy()
229 |     })
230 | 
231 |     it('shows the suggestions list when there are suggestions available', () => {
232 |       type(query)
233 |       expect($('ul[role="listbox"]')).toBeTruthy()
234 |     })
235 | 
236 |     it('shows a message when there are no suggestions available', () => {
237 |       createInstance({ noSuggestionsText: 'No suggestions found' })
238 | 
239 |       type('xyz')
240 |       expect($('ul[role="listbox"] > li:first-child').textContent).toEqual('No suggestions found')
241 |     })
242 | 
243 |     it('hides the suggestions list when the input is not focused', () => {
244 |       type(query)
245 | 
246 |       expect($('ul[role="listbox"]')).toBeTruthy()
247 | 
248 |       TestUtils.Simulate.blur($('input'))
249 | 
250 |       expect($('ul[role="listbox"]')).toBeNull()
251 |     })
252 | 
253 |     it('filters suggestions to those that match', () => {
254 |       type(query)
255 | 
256 |       $$('li[role="option"]').forEach((option) => {
257 |         expect(option.textContent).toMatch(new RegExp(query, 'i'))
258 |       })
259 |     })
260 | 
261 |     it('uses default suggestionsFilter', () => {
262 |       createInstance({
263 |         minQueryLength: 3,
264 |         suggestions: fixture
265 |       })
266 | 
267 |       type('Indi')
268 | 
269 |       const results = $$('li[role="option"]')
270 | 
271 |       expect(results.some((result) => result.textContent === 'French West Indies')).toBeTruthy()
272 |       expect(results.some((result) => result.textContent === 'India')).toBeTruthy()
273 |       expect(results.some((result) => result.textContent === 'Indonesia')).toBeFalsy()
274 |     })
275 | 
276 |     it('uses provided suggestionsFilter callback', () => {
277 |       createInstance({
278 |         minQueryLength: 3,
279 |         suggestions: fixture,
280 |         suggestionsFilter: (item, query) => item.name.includes(query)
281 |       })
282 | 
283 |       type('uni')
284 | 
285 |       const results = $$('li[role="option"]')
286 | 
287 |       expect(results.some((result) => result.textContent === 'Reunion')).toBeTruthy()
288 |       expect(results.some((result) => result.textContent === 'Tunisia')).toBeTruthy()
289 |     })
290 | 
291 |     it('should ignore suggestionsFilter when suggestionsTransform is provided', () => {
292 |       const suggestionsFilter = jasmine.createSpy('suggestionsFilter').and.callFake((item, query) => item.name.includes(query))
293 | 
294 |       createInstance({
295 |         minQueryLength: 3,
296 |         suggestions: fixture,
297 |         suggestionsFilter,
298 |         suggestionsTransform: (query, suggestions) => matchSorter(suggestions, query, { keys: ['name'] })
299 |       })
300 | 
301 |       type('uni')
302 | 
303 |       const results = $$('li[role="option"]')
304 | 
305 |       expect(results[0].textContent).toBe('United Arab Emirates') // best matches
306 |       expect(suggestionsFilter).not.toHaveBeenCalled()
307 |     })
308 | 
309 |     it('uses provided suggestionsTransform callback', () => {
310 |       createInstance({
311 |         minQueryLength: 3,
312 |         suggestions: fixture,
313 |         suggestionsTransform: (query, suggestions) => matchSorter(suggestions, query, { keys: ['name'] })
314 |       })
315 | 
316 |       type('uni')
317 | 
318 |       const results = $$('li[role="option"]')
319 | 
320 |       expect(results[0].textContent).toBe('United Arab Emirates') // best matches
321 |       expect(results[1].textContent).toBe('United Kingdom') // best matches
322 |       expect(results.some((result) => result.textContent === 'Reunion')).toBeTruthy()
323 |       expect(results.some((result) => result.textContent === 'Tunisia')).toBeTruthy()
324 |     })
325 | 
326 |     it('can handle non-ascii characters', () => {
327 |       const cities = ['Закаменск', 'Заозёрный', 'Заозёрск', 'Западная Двина', 'Заполярный', 'Зарайск']
328 | 
329 |       createInstance({ minQueryLength: 3, suggestions: cities.map((city, i) => ({ name: city, id: i })) })
330 | 
331 |       type('Зап')
332 | 
333 |       expect($$('li[role="option"]').length).toEqual(2)
334 |     })
335 | 
336 |     it('escapes the query before matching', () => {
337 |       expect(() => { type(query + '\\') }).not.toThrow()
338 |     })
339 | 
340 |     it('can limit the number of suggestions', () => {
341 |       type('uni')
342 | 
343 |       expect($$('li[role="option"]').length).toEqual(3)
344 | 
345 |       createInstance({ maxSuggestionsLength: 1, suggestions: fixture })
346 | 
347 |       type('uni')
348 | 
349 |       expect($$('li[role="option"]').length).toEqual(1)
350 |     })
351 | 
352 |     it('marks the matching text', () => {
353 |       type(query)
354 | 
355 |       $$('li[role="option"]').forEach((option) => {
356 |         expect(option.querySelector('mark')).toBeTruthy()
357 |         expect(option.querySelector('mark').textContent).toMatch(new RegExp('^' + query + '$', 'i'))
358 |       })
359 |     })
360 | 
361 |     it('handles up/down keys and can wrap', () => {
362 |       type(query)
363 | 
364 |       const input = $('input')
365 |       const results = $$('li[role="option"]')
366 | 
367 |       key('ArrowDown')
368 | 
369 |       expect(input.getAttribute('aria-activedescendant')).toEqual(results[0].id)
370 |       expect(results[0].className).toMatch(/is-active/)
371 | 
372 |       key('ArrowDown', 'ArrowDown')
373 | 
374 |       expect(input.getAttribute('aria-activedescendant')).toEqual(results[2].id)
375 |       expect(results[2].className).toMatch(/is-active/)
376 | 
377 |       key('ArrowDown')
378 | 
379 |       expect(input.getAttribute('aria-activedescendant')).toEqual(results[0].id)
380 |       expect(results[0].className).toMatch(/is-active/)
381 | 
382 |       key('ArrowUp', 'ArrowUp')
383 | 
384 |       expect(input.getAttribute('aria-activedescendant')).toEqual(results[1].id)
385 |       expect(results[1].className).toMatch(/is-active/)
386 |     })
387 | 
388 |     it('does not allow selection of disabled options', () => {
389 |       createInstance({
390 |         suggestions: fixture.map((item) => Object.assign({}, item, { disabled: true }))
391 |       })
392 | 
393 |       type(query)
394 | 
395 |       $$('li[role="option"]').forEach((option) => {
396 |         expect(option.matches('[aria-disabled="true"]')).toBeTruthy()
397 |       })
398 | 
399 |       key('ArrowDown', 'Enter')
400 | 
401 |       sinon.assert.notCalled(props.onAddition)
402 |     })
403 | 
404 |     it('triggers addition when a suggestion is clicked', () => {
405 |       type(query); click($('li[role="option"]:nth-child(2)'))
406 | 
407 |       sinon.assert.calledOnce(props.onAddition)
408 |       sinon.assert.calledWith(props.onAddition, { id: 196, name: 'United Kingdom' })
409 |     })
410 | 
411 |     it('triggers addition for the selected suggestion when a delimiter is pressed', () => {
412 |       key('Enter')
413 | 
414 |       sinon.assert.notCalled(props.onAddition)
415 | 
416 |       type(query); key('ArrowDown', 'ArrowDown', 'Enter')
417 | 
418 |       sinon.assert.calledOnce(props.onAddition)
419 |       sinon.assert.calledWith(props.onAddition, { id: 196, name: 'United Kingdom' })
420 |     })
421 | 
422 |     it('triggers addition for an unselected but matching suggestion when a delimiter is pressed', () => {
423 |       type('united kingdom'); key('Enter')
424 |       sinon.assert.calledWith(props.onAddition, { id: 196, name: 'United Kingdom' })
425 |     })
426 | 
427 |     it('does not trigger addition for a previously selected suggestion when no longer suggested', () => {
428 |       type('french'); key('ArrowDown', 'ArrowDown'); type('fries'); key('Enter')
429 | 
430 |       sinon.assert.notCalled(props.onAddition)
431 |     })
432 | 
433 |     it('clears the input when an addition is triggered', () => {
434 |       type(query); key('ArrowDown', 'ArrowDown', 'Enter')
435 | 
436 |       const input = $('input')
437 | 
438 |       expect(input.value).toEqual('')
439 |       expect(document.activeElement).toEqual(input)
440 |     })
441 | 
442 |     it('can render a custom suggestion component when provided', () => {
443 |       const CustomSuggestion = ({ item, query }) => (
444 |         React.createElement(
445 |           'div', { className: 'custom-suggestion' }, item.name)
446 |       )
447 | 
448 |       createInstance({
449 |         tags: [],
450 |         suggestions: fixture,
451 |         suggestionComponent: CustomSuggestion
452 |       })
453 | 
454 |       type(query)
455 | 
456 |       expect($$('.custom-suggestion').length).toEqual(3)
457 |     })
458 | 
459 |     it('displays a prompt when allowNew is enabled and newTagText is provided', () => {
460 |       createInstance({
461 |         tags: [],
462 |         suggestions: fixture,
463 |         allowNew: true,
464 |         newTagText: 'Create tag:'
465 |       })
466 | 
467 |       type(query)
468 | 
469 |       const lastSuggestion = $('li[role="option"]:last-child')
470 | 
471 |       expect(lastSuggestion.textContent).toEqual('Create tag: united')
472 |     })
473 | 
474 |     it('updates suggestions when top-level prop changes', () => {
475 |       createInstance({
476 |         tags: [],
477 |         suggestions: fixture
478 |       })
479 | 
480 |       type('united')
481 | 
482 |       expect($$('li[role="option"]').length).toEqual(3)
483 | 
484 |       createInstance({
485 |         suggestions: [...fixture, { id: 1000, name: 'United Union' }]
486 |       }, false)
487 | 
488 |       expect($$('li[role="option"]').length).toEqual(4)
489 |     })
490 | 
491 |     describe('when minQueryLength is zero', () => {
492 |       beforeEach(() => {
493 |         createInstance({ minQueryLength: 0, suggestions: fixture })
494 |       })
495 | 
496 |       it('shows suggestions list when the input is focused', () => {
497 |         TestUtils.Simulate.focus($('input'))
498 |         expect($('ul[role="listbox"]')).toBeTruthy()
499 |       })
500 | 
501 |       it('resets the suggestions list when an addition is triggered', () => {
502 |         type('french')
503 | 
504 |         expect($$('li[role="option"]').length).toEqual(2)
505 | 
506 |         key('ArrowDown', 'ArrowDown', 'Enter')
507 | 
508 |         expect($$('li[role="option"]').length).toEqual(6)
509 |       })
510 |     })
511 | 
512 |     it('selected suggestion can be cleared programmatically', () => {
513 |       type('french'); key('ArrowDown', 'ArrowDown')
514 | 
515 |       expect(instance.state.index).toBe(1)
516 | 
517 |       instance.clearSelectedIndex()
518 | 
519 |       expect(instance.state.index).toBe(-1)
520 |     })
521 |   })
522 | 
523 |   describe('tags', () => {
524 |     beforeEach(() => {
525 |       createInstance({ tags: [fixture[0], fixture[1]] })
526 |     })
527 | 
528 |     it('renders selected tags', () => {
529 |       expect($$('.react-tags__selected-tag').length).toEqual(instance.props.tags.length)
530 |     })
531 | 
532 |     it('triggers removal when a tag is clicked', () => {
533 |       click($('.react-tags__selected-tag'))
534 | 
535 |       sinon.assert.calledOnce(props.onDelete)
536 |       sinon.assert.calledWith(props.onDelete, sinon.match(0))
537 |     })
538 | 
539 |     it('moves focus to the input when a tag is removed', () => {
540 |       click($('.react-tags__selected-tag'))
541 |       expect(document.activeElement).toEqual($('input'))
542 |     })
543 | 
544 |     it('deletes the last selected tag when backspace is pressed and query is empty', () => {
545 |       type(''); key('Backspace')
546 | 
547 |       sinon.assert.calledOnce(props.onDelete)
548 |       sinon.assert.calledWith(props.onDelete, sinon.match(instance.props.tags.length - 1))
549 |     })
550 | 
551 |     it('does not delete the last selected tag when backspace is pressed and query is not empty', () => {
552 |       type('uni'); key('Backspace')
553 |       sinon.assert.notCalled(props.onDelete)
554 |     })
555 | 
556 |     it('does not delete the last selected tag when allowBackspace option is false', () => {
557 |       createInstance({
558 |         tags: [fixture[0], fixture[1]],
559 |         allowBackspace: false
560 |       })
561 | 
562 |       type(''); key('Backspace')
563 | 
564 |       sinon.assert.notCalled(props.onDelete)
565 |     })
566 | 
567 |     it('can render a custom tag component when provided', () => {
568 |       const Tag = (props) => (
569 |         React.createElement('button', { className: 'custom-tag' }, props.tag.name)
570 |       )
571 | 
572 |       createInstance({
573 |         tags: [fixture[0], fixture[1]],
574 |         tagComponent: Tag
575 |       })
576 | 
577 |       expect($$('.custom-tag').length).toEqual(2)
578 |     })
579 |   })
580 | 
581 |   describe('sizer', () => {
582 |     beforeEach(() => {
583 |       createInstance()
584 |     })
585 | 
586 |     it('appends a sizer element', () => {
587 |       expect($('input + div[style]')).toBeTruthy()
588 |     })
589 | 
590 |     it('removes the sizer from the layout', () => {
591 |       const result = Array.from($('input + div').style)
592 | 
593 |       expect(result).toContain('position')
594 |       expect(result).toContain('visibility')
595 |     })
596 | 
597 |     it('copies styles from the input', () => {
598 |       const result = Array.from($('input + div').style)
599 | 
600 |       expect(result).toContain('font-family')
601 |       expect(result).toContain('letter-spacing')
602 |     })
603 | 
604 |     it('copies the input placeholder or value into the sizer', () => {
605 |       const input = $('input')
606 |       const sizer = $('input + div')
607 | 
608 |       expect(sizer.textContent).toEqual(input.placeholder)
609 | 
610 |       type('hello world')
611 | 
612 |       expect(sizer.textContent).toEqual(input.value)
613 |     })
614 | 
615 |     it('resizes input to match sizer width', () => {
616 |       const input = $('input')
617 |       const sizer = $('input + div')
618 | 
619 |       type('hello world')
620 | 
621 |       // As of JSDom 9.10.0 scrollWidth is a getter only and always 0
622 |       // TODO: can we test this another way?
623 |       expect(input.style.width).toBeTruthy()
624 |       expect(window.getComputedStyle(input).width).toEqual(sizer.scrollWidth + 2 + 'px')
625 |     })
626 |   })
627 | 
628 |   describe('without autoresize', () => {
629 |     beforeEach(() => {
630 |       createInstance({ autoresize: false })
631 |     })
632 | 
633 |     it('does not assign a width to the input', () => {
634 |       const input = $('input')
635 | 
636 |       type('hello world')
637 | 
638 |       // TODO: can we test this another way?
639 |       expect(input.style.width).toBeFalsy()
640 |     })
641 |   })
642 | })
643 | 


--------------------------------------------------------------------------------