selectize: add mod_focus_input_after_select plugin

Plugin refocuses text input of a multiselect after an item from the
dropdown is selected.

Move all selectize plugins to a separate file.

Use the plugin in all labels fields.

Author: fstachura

htdocs/README.rst

@@ -133,6 +133,11 @@ js
 
   Part of Patchwork.
 
+``selectize-plugins.js.``
+  Extra plugins for selectize.
+
+  Part of Patchwork.
+
 ``selectize.min.js``
   Selectize is the hybrid of a ``textbox`` and ``<select>`` box. It's jQuery
   based and it has autocomplete and native-feeling keyboard navigation; useful

patchwork/templates/patchwork/partials/filters.html

@@ -1,6 +1,7 @@
 {% load static %}
 
 {{ project_labels|json_script:"project-labels-data" }}
+
 <script type="text/javascript">
 var filterform_displayed = false;
 function filter_click()
@@ -19,43 +20,6 @@
     }
 }
 
-Selectize.define('enter_key_submit', function (options) {
-    var self = this;
-
-    this.onKeyDown = (function (e) {
-        var original = self.onKeyDown;
-
-        return function (e) {
-            var wasOpened = this.isOpen;
-            original.apply(this, arguments);
-
-            if (e.keyCode === 13 &&
-                (this.$control_input.val() != '' || !wasOpened))
-                self.trigger('submit');
-        };
-    })();
-});
-
-// Submit form on shift+enter or ctrl+enter
-Selectize.define('mod_enter_key_submit', function (options) {
-    var self = this;
-
-    this.onKeyDown = (function (e) {
-        var original = self.onKeyDown;
-
-        return function (e) {
-            var wasOpened = this.isOpen;
-
-            if (e.keyCode === 13 && (e.shiftKey || e.ctrlKey)) {
-                self.trigger('submit');
-                return;
-            }
-
-            original.apply(this, arguments);
-        };
-    })();
-});
-
 $(document).ready(function() {
     $('#submitter_input').selectize({
         plugins: ['enter_key_submit'],
@@ -114,8 +78,8 @@
         }))
     );
 
-    $('#labels_input').selectize({
-        plugins: ['mod_enter_key_submit'],
+    const labels_selectize = $('#labels_input').selectize({
+        plugins: ['mod_enter_key_submit', 'mod_focus_input_after_select'],
         maxItems: null,
         persist: false,
         hideSelected: true,

patchwork/templates/patchwork/partials/patch-forms.html

@@ -3,6 +3,7 @@
 <script type="text/javascript">
 $(document).ready(function() {
     $('.labels-field').selectize({
+        plugins: ['mod_focus_input_after_select'],
         maxItems: null,
         persist: false,
         hideSelected: true,

static/js/selectize-plugins.js

@@ -0,0 +1,49 @@
+Selectize.define('enter_key_submit', function (options) {
+    var self = this;
+
+    this.onKeyDown = (function (e) {
+        var original = self.onKeyDown;
+
+        return function (e) {
+            var wasOpened = this.isOpen;
+            original.apply(this, arguments);
+
+            if (e.keyCode === 13 &&
+                (this.$control_input.val() != '' || !wasOpened))
+                self.trigger('submit');
+        };
+    })();
+});
+
+// Submit form on shift+enter or ctrl+enter
+Selectize.define('mod_enter_key_submit', function (options) {
+    var self = this;
+
+    this.onKeyDown = (function (e) {
+        var original = self.onKeyDown;
+
+        return function (e) {
+            var wasOpened = this.isOpen;
+
+            if (e.keyCode === 13 && (e.shiftKey || e.ctrlKey)) {
+                self.trigger('submit');
+                return;
+            }
+
+            original.apply(this, arguments);
+        };
+    })();
+});
+
+// Focus search input after item from dropdown is selected for multiselects
+Selectize.define('mod_focus_input_after_select', function (options) {
+    let prevSelect = this.onOptionSelect.bind(this);
+
+    this.onOptionSelect = e => {
+        // delegateTarget - div with dropdown
+        // delegateTarget.parentElement - input div created by selectize
+        //  ^ contains selected items and actual <input> control
+        e.delegateTarget.parentElement.getElementsByTagName('input')[0].focus();
+        prevSelect(e);
+    };
+});

templates/base.html

@@ -20,6 +20,7 @@
     <![endif]-->
     <script src="{% static "js/bootstrap.min.js" %}"></script>
     <script src="{% static "js/selectize.min.js" %}"></script>
+    <script src="{% static "js/selectize-plugins.js" %}"></script>
     <script src="{% static "js/clipboard.min.js" %}"></script>
     <script src="{% static "js/js.cookie.min.js" %}"></script>
     <script>