client/tag-input: add 'add' button

client/css/tag-input.styl

@@ -2,6 +2,15 @@
 
 div.tag-input
     position: relative
+
+    .main-control
+        display: flex
+        input
+            flex: 5
+        button
+            flex: 1
+            margin: 0 0 0 0.5em
+
     ul
         margin-top: 0.2em
     li

client/html/tag_input.tpl

@@ -1,5 +1,8 @@
 <div class='tag-input'>
+    <div class='main-control'>
         <input type='text' placeholder='type to add…'/>
+        <button>Add</button>
+    </div>
 
     <div class='tag-suggestions'>
         <div class='wrapper'>

client/js/controls/tag_input_control.js

@@ -118,6 +118,8 @@ class TagInputControl extends events.EventTarget {
             'click', e => this._evtToggleSuggestionsPopupOpacityClick(e));
         this._editAreaNode.querySelector('a.close').addEventListener(
             'click', e => this._evtCloseSuggestionsPopupClick(e));
+        this._editAreaNode.querySelector('button').addEventListener(
+            'click', e => this._evtAddTagButtonClick(e));
 
         // show
         this._hostNode.style.display = 'none';
@@ -248,6 +250,11 @@ class TagInputControl extends events.EventTarget {
         this._closeSuggestionsPopup();
     }
 
+    _evtAddTagButtonClick(e) {
+        this.addTag(this._tagInputNode.value, SOURCE_USER_INPUT);
+        this._tagInputNode.value = '';
+    }
+
     _evtToggleSuggestionsPopupOpacityClick(e) {
         e.preventDefault();
         this._toggleSuggestionsPopupOpacity();