From 1c1158d74c4f9258fd11e0c169ea47e0bb73b84c Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Mon, 29 Jun 2020 21:39:49 -0400
Subject: [PATCH] Fixed: Tag inputs respect non-QWERTY layouts

---
 .../Filter/Builder/FilterBuilderRowValue.js           |  2 +-
 frontend/src/Components/Form/TagInput.js              | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
index ef6084c02..d53c07607 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
@@ -135,7 +135,7 @@ class FilterBuilderRowValue extends Component {
         tagList={tagList}
         allowNew={!tagList.length}
         kind={kinds.DEFAULT}
-        delimiters={[9, 13]}
+        delimiters={['Tab', 'Enter']}
         maxSuggestionsLength={100}
         minQueryLength={0}
         tagComponent={FilterBuilderRowValueTag}
diff --git a/frontend/src/Components/Form/TagInput.js b/frontend/src/Components/Form/TagInput.js
index 45d972631..84cf7ef00 100644
--- a/frontend/src/Components/Form/TagInput.js
+++ b/frontend/src/Components/Form/TagInput.js
@@ -100,9 +100,9 @@ class TagInput extends Component {
       suggestions
     } = this.state;
 
-    const keyCode = event.keyCode;
+    const key = event.key;
 
-    if (keyCode === 8 && !value.length) {
+    if (key === 'Backspace' && !value.length) {
       const index = tags.length - 1;
 
       if (index >= 0) {
@@ -116,7 +116,7 @@ class TagInput extends Component {
       event.preventDefault();
     }
 
-    if (delimiters.includes(keyCode)) {
+    if (delimiters.includes(key)) {
       const selectedIndex = this._autosuggestRef.highlightedSuggestionIndex;
       const tag = getTag(value, selectedIndex, suggestions, allowNew);
 
@@ -256,7 +256,7 @@ TagInput.propTypes = {
   allowNew: PropTypes.bool.isRequired,
   kind: PropTypes.oneOf(kinds.all).isRequired,
   placeholder: PropTypes.string.isRequired,
-  delimiters: PropTypes.arrayOf(PropTypes.number).isRequired,
+  delimiters: PropTypes.arrayOf(PropTypes.string).isRequired,
   minQueryLength: PropTypes.number.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
@@ -271,8 +271,7 @@ TagInput.defaultProps = {
   allowNew: true,
   kind: kinds.INFO,
   placeholder: '',
-  // Tab, enter, space and comma
-  delimiters: [9, 13, 32, 188],
+  delimiters: ['Tab', 'Enter', ' ', ','],
   minQueryLength: 1,
   tagComponent: TagInputTag
 };