Make all select boxes searchable by typing

Author: Floppy

app/assets/stylesheets/src/dark-theme-overrides.scss

@@ -1,6 +1,7 @@
 @mixin tom-select-dark-mode() {
 
 	#model_tag_list-ts-dropdown,
+	.single .ts-control div[data-ts-item],
 	.ts-wrapper .ts-control input,
 	.ts-wrapper .ts-dropdown .ts-dropdown-content .option {
 		color: #fff !important;

app/helpers/application_helper.rb

@@ -172,7 +172,7 @@ def select_input_row(form, name, select_options, options = {})
           safe_join [
             content_tag(:div, class: "input-group") do
               safe_join [
-                form.select(name, select_options, options.compact, {class: "form-control col-auto form-select #{"is-invalid" if form.object&.errors&.include?(name) && !form.object.errors[name].empty?}"}),
+                form.select(name, select_options, options.compact, {data: {controller: "searchable-select"}, class: "form-control col-auto form-select #{"is-invalid" if form.object&.errors&.include?(name) && !form.object.errors[name].empty?}"}),
                 (link_to(options[:button][:label], options[:button][:path], class: "btn btn-outline-secondary col-auto") if options[:button])
               ]
             end,
@@ -192,7 +192,7 @@ def collection_select_input_row(form, name, collection, value_method, text_metho
           safe_join [
             content_tag(:div, class: "input-group") do
               safe_join [
-                form.collection_select(:"#{name}_id", collection, value_method, text_method, options.compact, {class: "form-control col-auto form-select #{"is-invalid" if form.object&.errors&.include?(name) && !form.object.errors[name].empty?}"}),
+                form.collection_select(:"#{name}_id", collection, value_method, text_method, options.compact, {data: {controller: "searchable-select"}, class: "form-control col-auto form-select #{"is-invalid" if form.object&.errors&.include?(name) && !form.object.errors[name].empty?}"}),
                 (link_to(options[:button][:label], options[:button][:path], class: "btn btn-outline-secondary col-auto") if options[:button])
               ]
             end,

app/javascript/controllers/index.ts

@@ -11,6 +11,7 @@ import CopyTextController from './copy_text_controller'
 import EditableController from './editable_controller'
 import I18nController from './i18n_controller'
 import RendererController from './renderer_controller'
+import SearchableSelectController from './searchable_select_controller'
 import StorageServiceController from './storage_service_controller'
 import TagInputController from './tag_input_controller'
 import TagSectionController from './tag_section_controller'
@@ -24,6 +25,7 @@ application.register('bulk-edit', BulkEditController)
 application.register('editable', EditableController)
 application.register('i18n', I18nController)
 application.register('renderer', RendererController)
+application.register('searchable-select', SearchableSelectController)
 application.register('storage-service', StorageServiceController)
 application.register('tag-input', TagInputController)
 application.register('tag-section', TagSectionController)

app/javascript/controllers/searchable_select_controller.ts

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus'
+
+import TomSelect from 'tom-select'
+import type { TomInput } from 'tom-select/dist/cjs/types'
+
+// Connects to data-controller="searchable-select"
+export default class extends Controller {
+  tomSelect: TomSelect | null
+
+  connect (): void {
+    this.tomSelect = new TomSelect((this.element as TomInput), { // eslint-disable-line no-new
+      selectOnTab: true
+    })
+  }
+
+  disconnect (): void {
+    this.tomSelect?.destroy()
+  }
+
+  reconnect (): void {
+    this.disconnect()
+    this.connect()
+  }
+}