diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e9525b..144e068 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ - Refactored event handlers and callbacks to use `on` prefixes - Refactored `classNames` option to avoid creating new and merging objects for each top-level props change - Refactored `deleteTag` method so it no longer clears the input text when a tag is removed +- Refactored `delimiters` option to be an array of `KeyboardEvent.key` values - Removed `clearInputOnDelete` option - Removed `autofocus` option - Removed `delimiterChars` option diff --git a/README.md b/README.md index 77a7dde..2b44644 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,6 @@ ReactDOM.render(, document.getElementById('app')) - [`removeButtonText`](#removeButtontext-optional) - [`autoresize`](#autoresize-optional) - [`delimiters`](#delimiters-optional) -- [`delimiterChars`](#delimiterchars-optional) - [`minQueryLength`](#minquerylength-optional) - [`maxSuggestionsLength`](#maxsuggestionslength-optional) - [`classNames`](#classnames-optional) @@ -151,10 +150,6 @@ Boolean parameter to control whether the text-input should be automatically resi Array of keys matching `KeyboardEvent.key` values. When a corresponding key is pressed it will trigger tag selection or creation. Defaults to `['Enter', 'Tab']`. -#### delimiterChars (optional) - -Array of literal characters. When a corresponding character is entered it will trigger tag selection or creation. Defaults to `[',', ';']`. - #### minQueryLength (optional) Minimum query length required to show the suggestions list. Defaults to `2`. @@ -296,7 +291,7 @@ To see all changes refer to [the changelog](CHANGELOG.md). - React 16.5 or above is now required. - Event handlers and callbacks have been renamed to use `on` prefixes, e.g. the `handleAddition()` callback should now be called `onAddition()`. - 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. -- The `delimiterChars` option is now an array of literal characters, e.g. `[',', ';']`. - The `placeholder` option has been renamed `placeholderText` +- The `delimiterChars` option has been removed, use the `delimiters` option instead. - The `clearInputOnDelete` option has been removed and is now the default behaviour - The `autofocus` option has been removed. diff --git a/lib/ReactTags.js b/lib/ReactTags.js index 9a7f961..0dd2ecc 100644 --- a/lib/ReactTags.js +++ b/lib/ReactTags.js @@ -112,9 +112,14 @@ class ReactTags extends React.Component { this.props.onInput(query) } - const lastChar = query.length === this.state.query.length + 1 ? query.slice(-1) : null - - if (lastChar && this.props.delimiterChars.indexOf(lastChar) > -1) { + // NOTE: This test is a last resort for soft keyboards and browsers which do not + // support `KeyboardEvent.key`. + // + // + if ( + query.length === this.state.query.length + 1 && + this.props.delimiters.indexOf(query.slice(-1)) > -1 + ) { pressDelimiter.call(this) } else if (query !== this.state.query) { const options = getOptions.call(this, query) @@ -256,7 +261,6 @@ ReactTags.defaultProps = { autoresize: true, classNames: CLASS_NAMES, delimiters: [KEYS.TAB, KEYS.ENTER], - delimiterChars: [',', ';'], minQueryLength: 2, maxSuggestionsLength: 6, allowNew: false, @@ -275,8 +279,7 @@ ReactTags.propTypes = { suggestions: PropTypes.arrayOf(PropTypes.object), suggestionsFilter: PropTypes.func, autoresize: PropTypes.bool, - delimiter: PropTypes.arrayOf(PropTypes.string), - delimiterChars: PropTypes.arrayOf(PropTypes.string), + delimiters: PropTypes.arrayOf(PropTypes.string), onDelete: PropTypes.func.isRequired, onAddition: PropTypes.func.isRequired, onInput: PropTypes.func,