From ee76d48623dd48fc0a32eccd10860d7dd0cc9546 Mon Sep 17 00:00:00 2001
From: Alan Llamas <alanllamasg@gmail.com>
Date: Wed, 1 May 2019 14:32:41 -0500
Subject: [PATCH 1/2] added patch to recognize some delimiter characters for
 soft keyboards

added patch and testes manually in brwoserStack
---
 example/main.js  |  5 ++++-
 lib/ReactTags.js | 55 ++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/example/main.js b/example/main.js
index 2681e84..0cfe757 100644
--- a/example/main.js
+++ b/example/main.js
@@ -37,7 +37,10 @@ class App extends React.Component {
           tags={this.state.tags}
           suggestions={this.state.suggestions}
           handleDelete={this.handleDelete.bind(this)}
-          handleAddition={this.handleAddition.bind(this)} />
+          handleAddition={this.handleAddition.bind(this)} 
+          delimiterChars={['188','190','32','55','220','191']}
+          allowNew={true}
+        />
         <p>Output:</p>
         <pre><code>{JSON.stringify(this.state.tags, null, 2)}</code></pre>
       </React.Fragment>
diff --git a/lib/ReactTags.js b/lib/ReactTags.js
index e1a7feb..3ed62ed 100644
--- a/lib/ReactTags.js
+++ b/lib/ReactTags.js
@@ -13,6 +13,17 @@ const KEYS = {
   UP_ARROW: 38,
   DOWN_ARROW: 40
 }
+const keyStrokes = {
+  ',': 188,
+  '.': 190,
+  ' ': 32,
+  '/': 55,
+  '\\': 220,
+  '?': 191
+}
+
+let oldData;
+let code
 
 const CLASS_NAMES = {
   root: 'react-tags',
@@ -47,7 +58,7 @@ class ReactTags extends React.Component {
       onBlur: this.handleBlur.bind(this),
       onFocus: this.handleFocus.bind(this),
       onInput: this.handleInput.bind(this),
-      onKeyDown: this.handleKeyDown.bind(this)
+      onKeyUp: this.handleKeyDown.bind(this)
     }
   }
 
@@ -71,13 +82,42 @@ class ReactTags extends React.Component {
     const { query, selectedIndex } = this.state
     const { delimiters, delimiterChars } = this.props
 
+    // console.log(e.key);
+    // console.log(e.keyCode);
+
+    let data = e.target.value
+    let d;
+    if (data !== oldData) {
+      oldData = data
+      d = data.length > 0 ? data.substr(data.length -1, 1) : false
+      // console.log(d);
+      code = keyStrokes[d] !== undefined ? String(keyStrokes[d]) : -1
+      // console.log(code);
+    }
+    
+    
+    
     // when one of the terminating keys is pressed, add current query to the tags.
-    if (delimiters.indexOf(e.keyCode) > -1 || delimiterChars.indexOf(e.key) > -1) {
-      if (query || selectedIndex > -1) {
-        e.preventDefault()
-      }
+    if (delimiters.indexOf(e.keyCode) > -1 || delimiterChars.indexOf(e.key) > -1 || delimiterChars.indexOf(code) > -1) {
+      // console.log(delimiterChars);
+      // console.log(delimiterChars.indexOf(code));
+      // console.log(d);
+      
+      let newQuery = query.split(d)[0]
+      // console.log(newQuery);
+      this.setState({ query : newQuery }, () => {
+        
+        console.log(query);
+        
+        // if (query || selectedIndex > -1) {
+        //   e.preventDefault()
+        // }
+  
+        this.handleDelimiter()
+        return null
+      })
 
-      this.handleDelimiter()
+      
     }
 
     // when backspace key is pressed and query is blank, delete the last tag
@@ -105,7 +145,8 @@ class ReactTags extends React.Component {
 
   handleDelimiter () {
     const { query, selectedIndex } = this.state
-
+    // console.log(query);
+    
     if (query.length >= this.props.minQueryLength) {
       // Check if the user typed in an existing suggestion.
       const match = this.suggestions.state.options.findIndex((suggestion) => {

From a437689569a038102505a4f1d8095aae249fa60a Mon Sep 17 00:00:00 2001
From: Alan Llamas <alanllamasg@gmail.com>
Date: Thu, 2 May 2019 17:46:51 -0500
Subject: [PATCH 2/2] commented console.log

---
 lib/ReactTags.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/ReactTags.js b/lib/ReactTags.js
index 3ed62ed..61d0e6a 100644
--- a/lib/ReactTags.js
+++ b/lib/ReactTags.js
@@ -107,11 +107,11 @@ class ReactTags extends React.Component {
       // console.log(newQuery);
       this.setState({ query : newQuery }, () => {
         
-        console.log(query);
+        // console.log(query);
         
-        // if (query || selectedIndex > -1) {
-        //   e.preventDefault()
-        // }
+        if (query || selectedIndex > -1) {
+          e.preventDefault()
+        }
   
         this.handleDelimiter()
         return null