https://betalist.com/assets/controllers/tom_select_controller-2877b381.js

1import { Controller } from "@hotwired/stimulus"
2import TomSelect from "tom-select"
3import { get } from "@rails/request.js"
4
5// Connects to data-controller="tom-select"
6export default class extends Controller {
7  static values = { 
8    remoteUrl: String, 
9    maximumLength: { type: Number, default: 3 },
10    placeholder: String
11  }
12
13	connect() {
14		const settings = {
15      valueField: "value",
16		  labelField: "text",
17			maxItems: this.maximumLengthValue,
18			placeholder: this.placeholderValue || undefined,
19			hidePlaceholder: false,
20			closeAfterSelect: true,
21			onItemAdd: this._onItemAdd.bind(this),
22			plugins: {
23				remove_button:{
24					title: "Remove this item",
25				}
26			},
27			load: this._loadData.bind(this),
28			preload: true
29		}
30
31		this.tomSelect = new TomSelect(this.element, settings);
32
33		// Prevent Turbo morph from breaking Tom Select's DOM
34		this.element.dataset.turboPermanent = ""
35	}
36
37	disconnect() {
38		if (this.tomSelect) {
39			this.tomSelect.destroy()
40			this.tomSelect = null
41		}
42
43		delete this.element.dataset.turboPermanent
44	}
45
46	// Private
47
48	_onItemAdd(value, $item) {
49		this.tomSelect.setTextboxValue("")
50		// No refreshOptions() here — combined with closeAfterSelect it kept
51		// reopening the full dropdown right after every selection
52	}
53
54	_loadData(query, callback) {
55		get(this.remoteUrlValue + encodeURIComponent(query))
56			.then(response => response.json)
57			.then(data => { callback(data) })
58			.catch(err => { callback() });
59	}
60}