Create StoryLabels component

app/assets/javascripts/components/jquery_wrappers/InputTagit.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+class InputTagit extends React.Component {
+  componentDidMount() {
+    this.loadTagit();
+  }
+
+  loadTagit() {
+    $(this.input).tagit(
+      this.tagitProperties()
+    ).on('change', this.props.onChange);
+  }
+
+  tagitProperties() {
+    console.log(this.props);
+    return {
+      availableTags: this.props.availableLabels,
+      readOnly: this.props.disabled,
+    };
+  }
+
+  render () {
+    return (
+      <input ref={ input => { this.input = input } } { ...this.props.input } tabIndex="this.props.labels"/>
+    );
+  }
+}
+
+export default InputTagit;

app/assets/javascripts/components/story/StoryLabels.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import InputTagit from 'components/jquery_wrappers/InputTagit';
+
+const StoryLabels = ({ name, className, value, availableLabels, onChange, disabled = false }) =>
+  <div>
+    <label htmlFor={name}>{ I18n.t(`activerecord.attributes.story.${name}`) }</label>
+    <br />
+    <InputTagit
+      onChange={onChange}
+      availableLabels={availableLabels}
+      disabled={disabled}
+      input={{
+        name,
+        defaultValue: value,
+        className: `form-control input-sm ${className}`,
+        disabled,
+      }}
+    />
+  </div>
+
+export default StoryLabels;

app/assets/javascripts/views/story_view.js

@@ -5,6 +5,7 @@ import StoryDescription from 'components/story/StoryDescription';
 import StoryHistoryLocation from 'components/story/StoryHistoryLocation';
 import StorySelect from 'components/story/StorySelect';
 import StoryDatePicker from 'components/story/StoryDatePicker';
+import StoryLabels from 'components/story/StoryLabels';
 
 var Clipboard = require('clipboard');
 
@@ -404,12 +405,9 @@ module.exports = FormView.extend({
       );
 
       this.$el.append(
-        this.makeFormControl({
-          name: "labels",
-          label: true,
-          control: this.textField("labels"),
-          class: 'form-control',
-          disabled: this.isReadonly()
+        this.makeFormControl(function(div) {
+          const $storyTags = $('<div class="form-group" data-tags></div>');
+          $(div).append($storyTags);
         })
       );
 
@@ -441,8 +439,6 @@ module.exports = FormView.extend({
         })
       );
 
-      this.initTags();
-
       this.renderNotes();
 
       if(this.model.get('story_type') === 'release') {
@@ -494,6 +490,21 @@ module.exports = FormView.extend({
         );
     }
 
+    const tagsInput = this.$('[data-tags]')[0];
+    if (tagsInput) {
+      ReactDOM.render(
+        <StoryLabels
+          name='labels'
+          className='labels'
+          value={this.model.get('labels')}
+          availableLabels={this.model.collection.labels}
+          onChange={ (event) => this.onChangeLabels(event) }
+          disabled={this.isReadonly()}
+        />,
+        tagsInput
+      );
+    }
+
     this.renderSelects();
   },
 
@@ -699,21 +710,8 @@ module.exports = FormView.extend({
     this.$el.find('a.collapse').removeClass(/icons-/).addClass("icons-collapse");
   },
 
-  initTags: function() {
-    var model = this.model;
-    var $input = this.$el.find("input[name='labels']");
-    $input.tagit({
-      availableTags: model.collection.labels,
-      readOnly: this.isReadonly()
-    });
-
-    // Manually bind labels for now
-    $input.on('change', function(){
-      var that = this;
-      setTimeout(function() {
-        model.set({ labels: $(that).val()});
-      }, 50);
-    });
+  onChangeLabels: function(event){
+    this.model.set({ labels: event.target.value }, {silent: true});
   },
 
   renderNotes: function() {