https://reach.wellfound.com/assets/controllers/select_component_co…c5fd3996deed0a275ff64c5bd6445e0093ecafbe.js

1import { Controller } from "@hotwired/stimulus";
2import TomSelect from "tom-select";
3
4export default class extends Controller {
5  static values = {
6    search: Boolean,
7  };
8
9  connect() {
10    if (this.searchValue) {
11      this.select = new TomSelect(this.element, {});
12    }
13
14    this.element.addEventListener("change", this.syncSelectedOption);
15  }
16
17  disconnect() {
18    if (this.select) {
19      this.select.destroy();
20    }
21
22    this.element.removeEventListener("change", this.syncSelectedOption);
23  }
24
25  clearInput() {
26    if (this.select) {
27      this.select.clear(true);
28    }
29  }
30
31  syncSelectedOption = (e) => {
32    const value = e.target.value;
33    const option = this.element.querySelector(`option[value="${value}"]`);
34
35    Array.from(this.element.options).forEach((option) => {
36      option.removeAttribute("selected");
37    });
38
39    if (value && option) option.setAttribute("selected", "selected");
40  };
41};