Merge branch 'master' into 6.0

Author: i-like-robots

CHANGELOG.md

@@ -20,6 +20,14 @@
 - Removed `delimiterChars` option
 - Updated React dependency to 16.5+
 
+## 5.12.1
+
+- Fixed an issue where the `componentDidUpdate()` callback of the input component can be called too many times
+
+## 5.12.0
+
+- Added `noSuggestionsText` option ([jraack](https://github.com/jraack))
+
 ## 5.11.2
 
 - 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.

README.md

@@ -2,7 +2,7 @@
 
 [![Build status](https://api.travis-ci.org/i-like-robots/react-tags.svg?branch=master)](https://travis-ci.org/i-like-robots/react-tags) [![Coverage Status](https://coveralls.io/repos/github/i-like-robots/react-tags/badge.svg?branch=master)](https://coveralls.io/github/i-like-robots/react-tags)
 
-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.
+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/).
 
 **Please note, this version is in beta, you can check out the [latest stable version here](https://github.com/i-like-robots/react-tags)** 📢
 
@@ -83,6 +83,7 @@ ReactDOM.render(<App />, document.getElementById('app'))
 - [`suggestionsFilter`](#suggestionsfilter-optional)
 - [`placeholderText`](#placeholdertext-optional)
 - [`removeButtonText`](#removeButtontext-optional)
+- [`noSuggestionsText`](#noSuggestionsText-optional)
 - [`autoresize`](#autoresize-optional)
 - [`delimiters`](#delimiters-optional)
 - [`minQueryLength`](#minquerylength-optional)
@@ -142,6 +143,10 @@ The placeholder string shown for the input. Defaults to `'Add new tag'`.
 
 The title text to add to the remove selected tag button. Default `'Click to remove tag'`.
 
+#### noSuggestionsText (optional)
+
+Message shown if there are no matching suggestions. Defaults to `null`.
+
 #### autoresize (optional)
 
 Boolean parameter to control whether the text-input should be automatically resized to fit its value. Defaults to `true`.

example/main.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import ReactDom from 'react-dom'
-import Tags from '../lib/ReactTags'
+import ReactDOM from 'react-dom'
+import ReactTags from '../lib/ReactTags'
 import suggestions from './countries'
 
 class App extends React.Component {
@@ -31,7 +31,7 @@ class App extends React.Component {
     return (
       <React.Fragment>
         <p>Select the countries you have visited using React Tags below:</p>
-        <Tags
+        <ReactTags
           tags={this.state.tags}
           suggestions={this.state.suggestions}
           onDelete={this.onDelete.bind(this)}
@@ -43,4 +43,4 @@ class App extends React.Component {
   }
 }
 
-ReactDom.render(<App />, document.getElementById('app'))
+ReactDOM.render(<App />, document.getElementById('app'))

lib/Input.js

@@ -14,7 +14,8 @@ const STYLE_PROPS = [
   'fontFamily',
   'fontWeight',
   'fontStyle',
-  'letterSpacing'
+  'letterSpacing',
+  'textTransform'
 ]
 
 class Input extends React.Component {
@@ -33,8 +34,10 @@ class Input extends React.Component {
     }
   }
 
-  componentDidUpdate () {
-    this.updateInputWidth()
+  componentDidUpdate ({ query, placeholder }) {
+    if (query !== this.props.query || placeholder !== this.props.placeholder) {
+      this.updateInputWidth()
+    }
   }
 
   copyInputStyles () {

lib/ReactTags.js

@@ -75,8 +75,13 @@ function defaultSuggestionsFilter (item, query) {
 }
 
 function getOptions (query) {
-  const filtered = this.props.suggestions.filter((item) => this.props.suggestionsFilter(item, query))
-  return filtered.slice(0, this.props.maxSuggestionsLength)
+  const options = this.props.suggestions.filter((item) => this.props.suggestionsFilter(item, query))
+
+  if (options.length === 0 && this.props.noSuggestionsText) {
+    options.push({ id: 0, name: this.props.noSuggestionsText, disabled: true, disableMarkIt: true })
+  }
+
+  return options.slice(0, this.props.maxSuggestionsLength)
 }
 
 class ReactTags extends React.Component {
@@ -256,6 +261,7 @@ ReactTags.defaultProps = {
   tags: [],
   placeholderText: 'Add new tag',
   removeButtonText: 'Click to remove tag',
+  noSuggestionsText: null,
   suggestions: [],
   suggestionsFilter: defaultSuggestionsFilter,
   autoresize: true,
@@ -276,6 +282,7 @@ ReactTags.propTypes = {
   tags: PropTypes.arrayOf(PropTypes.object),
   placeholderText: PropTypes.string,
   removeButtonText: PropTypes.string,
+  noSuggestionsText: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.object),
   suggestionsFilter: PropTypes.func,
   autoresize: PropTypes.bool,

lib/Suggestions.js

@@ -44,7 +44,8 @@ class Suggestions extends React.Component {
           className={classNames.join(' ')}
           aria-disabled={item.disabled === true}
           onMouseDown={this.onMouseDown.bind(this, item)}>
-          <SuggestionComponent item={item} query={this.props.query} />
+          {item.disableMarkIt ? item.name
+            : <SuggestionComponent item={item} query={this.props.query} />}
         </li>
       )
     })

spec/ReactTags.spec.js

@@ -228,9 +228,13 @@ describe('React Tags', () => {
     it('shows the suggestions list when there are suggestions available', () => {
       type(query)
       expect($('ul[role="listbox"]')).toBeTruthy()
+    })
+
+    it('shows a message when there are no suggestions available', () => {
+      createInstance({ noSuggestionsText: 'No suggestions found' })
 
       type('xyz')
-      expect($('ul[role="listbox"]')).toBeNull()
+      expect($('ul[role="listbox"] > li:first-child').textContent).toEqual('No suggestions found')
     })
 
     it('hides the suggestions list when the input is not focused', () => {