Refactor soft keyboard support to use existing delimiters option

Author: i-like-robots

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

README.md

@@ -85,7 +85,6 @@ ReactDOM.render(<App />, 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 `delimiterChars` option has been removed, use the `delimiters` option instead.
 - The `placeholder` option has been renamed `placeholderText`
 - The `clearInputOnDelete` option has been removed and is now the default behaviour
 - The `autofocus` option has been removed.

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`.
+    // <https://bugs.chromium.org/p/chromium/issues/detail?id=763559>
+    // <https://bugs.chromium.org/p/chromium/issues/detail?id=118639>
+    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,