[WIP] Replace bootstrap-tagsinput with Tom Select

app/assets/stylesheets/spotlight/_catalog.scss

@@ -70,27 +70,12 @@
 }
 
 form.edit_solr_document {
-  .bootstrap-tagsinput {
-    @extend .clearfix;
-    cursor: text;
-  }
   .bg-warning.form-text {
     font-size: 0.9em;
     padding: 3px 6px;
   }
 }
 
-.bootstrap-tagsinput {
-  display: block;
-  .twitter-typeahead {
-    width: auto;
-  }
-
-  .tt-input {
-    vertical-align: baseline !important;
-  }
-}
-
 .blacklight-catalog-edit, .blacklight-catalog-show {
   .img-thumbnail {
     @extend .col-md-6;

app/assets/stylesheets/spotlight/_spotlight.scss

@@ -34,6 +34,7 @@
 @import "utilities";
 @import "view_larger";
 @import "accessibility";
+@import "tom_select_fix";
 
 
 

app/assets/stylesheets/spotlight/_tom_select_fix.scss

@@ -0,0 +1,4 @@
+// Remove when this is fixed or we switch from sassc-rails: https://github.com/orchidjs/tom-select/issues/656
+@function max($value, $value2) {
+  @return unquote('max(#{$value}, #{$value2})');
+}

app/javascript/spotlight/admin/exhibit_tag_autocomplete.js

@@ -1,39 +1,38 @@
+import TomSelect from 'tom-select';
+
 export default class {
   connect() {
-    $('[data-autocomplete-tag="true"]').each(function(_i, el) {
-      var $el = $(el);
-      // By default tags input binds on page ready to [data-role=tagsinput],
-      // however, that doesn't work with Turbolinks. So we init manually:
-      $el.tagsinput();
-
-      var tags = new Bloodhound({
-        datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
-        queryTokenizer: Bloodhound.tokenizers.whitespace,
-        limit: 100,
-        prefetch: {
-          url: $el.data('autocomplete-url'),
-          ttl: 1,
-          filter: function(list) {
-            // Let the dom know that the response has been returned
-            $el.attr('data-autocomplete-fetched', true);
-            return $.map(list, function(tag) { return { name: tag }; });
-          }
-        }
-      });
-
-      tags.initialize();
+    const tagOptions = {
+      closeAfterSelect: true,
+      create: true,
+      createOnBlur: true,
+      duplicates: false,
+      hideSelected: true,
+      labelField: 'name',
+      loadThrottle: 300,
+      maxOptions: 100,
+      persist: false,
+      plugins: ['remove_button'],
+      preload: true,
+      searchField: 'name',
+      valueField: 'name',
+      onItemAdd: function(value, item) {
+        this.control_input.value = '';
+      },
+      load: function(query, callback) {
+        fetch(this.input.dataset.autocompleteUrl)
+          .then(response => response.json())
+          .then(json => {
+            callback(json.map(tag => ({name: tag.trim()})));
+          }).catch(() => callback());
+      }
+    }
 
-      $el.tagsinput('input').typeahead({highlight: true, hint: false}, {
-        name: 'tags',
-        displayKey: 'name',
-        source: tags.ttAdapter()
-      }).bind('typeahead:selected', $.proxy(function (obj, datum) {
-        $el.tagsinput('add', datum.name);
-        $el.tagsinput('input').typeahead('val', '');
-      })).bind('blur', function() {
-        $el.tagsinput('add', $el.tagsinput('input').typeahead('val'));
-        $el.tagsinput('input').typeahead('val', '');
-      })
-    })
+    document.querySelectorAll('[data-autocomplete-tag="true"]').forEach(tagElement => {
+      // Handle leading spaces (e.g., 'Tag 1, Tag 2') or else the user can add what appear to be duplicate tags.
+      const items = tagElement.value.split(',').map(item => item.trim()).filter(Boolean);
+      const options = items.map(item => ({name: item}));
+      new TomSelect(tagElement, { ...tagOptions, items, options });
+    });
   }
 }

app/javascript/spotlight/admin/index.js

@@ -1,7 +1,6 @@
 // These scripts are in the vendor directory
 import 'nestable'
 import 'parameterize'
-import 'bootstrap-tagsinput'
 import 'jquery.serializejson'
 import 'leaflet-iiif'
 import 'Leaflet.Editable'

lib/generators/spotlight/templates/spotlight.scss

@@ -1,6 +1,6 @@
-@import 'bootstrap-tagsinput';
 @import 'spotlight/variables_bootstrap';
 @import 'bootstrap';
 @import 'sir-trevor/main';
 @import 'leaflet';
 @import 'spotlight/spotlight';
+@import 'tom-select/tom-select.bootstrap4.min';