Removed interim fix for tag field (#581)

* Fixes #568 - removed interim delimiter fix for tag field

* DELIMITERS as const

Author: mmmavis

package.json

@@ -91,7 +91,7 @@
     "react-ga": "^2.1.2",
     "react-helmet": "^5.0.3",
     "react-router": "^3.0.0",
-    "react-tag-autocomplete": "^5.3.0",
+    "react-tag-autocomplete": "^5.4.0",
     "shx": "^0.2.1",
     "superagent": "^3.3.0",
     "url": "^0.11.0",

pages/add/form/detail-info-fields.js

@@ -3,6 +3,8 @@ import ReactTags from 'react-tag-autocomplete';
 import validator from './validator';
 import Service from '../../../js/service';
 
+const DELIMITERS = [9,13,188]; // keycodes for tab,enter,comma
+
 let Tags = React.createClass({
   getInitialState() {
     return {
@@ -22,35 +24,6 @@ let Tags = React.createClass({
       .catch((reason) => {
         console.error(reason);
       });
-
-      this.shimTagDelimiter();
-  },
-  shimTagDelimiter: function() {
-    // The ReactTags component for some reason does not
-    // do tag seperation on anything except "enter" which is
-    // not an intuitive key when you're on a single-line input.
-    // We are adding a hack here to force delimiting on comma.
-    // Ideally, this hack can be taken out again after
-    // https://github.com/i-like-robots/react-tags/issues/76 is addressed.
-    try {
-      const reactTags = this.reactTags;
-      const trueInput = reactTags.input.input;
-      const forceKey = reactTags.handleKeyDown.bind(reactTags);
-
-      trueInput.addEventListener("keyup", evt => {
-        // did we type a comma?
-        const key = evt.key;
-        if (key === ',') {
-          // remove the comma and type an enter instead
-          const { query, selectedIndex } = reactTags.state;
-          reactTags.state.query = query.substring(0, query.length-1);
-          forceKey({ keyCode: 13, preventDefault: ()=>{} });
-        }
-      });
-
-    } catch (e) {
-      console.warning("Could not set up comma-delimiting for tags");
-    }
   },
   updateTags: function(tags) {
     this.setState({ tags }, () => {
@@ -80,15 +53,15 @@ let Tags = React.createClass({
     }).filter(suggestion => !!suggestion);
   },
   render: function() {
-
     return <ReactTags
               ref={e => this.reactTags = e}
               tags={this.state.tags}
               suggestions={this.getFilteredSuggestions()}
               allowNew={true}
+              autofocus={false}
+              delimiters={DELIMITERS}
               handleDelete={(...args) => this.handleDelete(...args) }
               handleAddition={(...args) => this.handleAddition(...args) }
-              autofocus={false}
               classNames={{
                 root: `react-tags form-control d-flex flex-column flex-sm-row`,
                 selectedTag: `selected-tag btn btn-sm mr-sm-2 my-1`,