Stimulus Controller for slim-select that supports AJAX content

_example.html.erb

<%= select_tag column_name,
  options_for_select(...), {
    multiple: true,
    placeholder: "Select multiple...",
    data: {
      controller: "select", 
      action: "stimulus-reflex:after@document->select#delayedSetup",
      options_url: typeahead_path(...)
    }} %>

select_controller.js

import ApplicationController from './application_controller'
import debounce from 'debounce'
import SlimSelect from 'slim-select'

export default class extends ApplicationController {
  connect () {
    super.connect()
    this.setup()
  }

  disconnect (event) {
    this.cleanup()
  }

  setup (event) {
    this.cleanup()
    const options = {
      select: this.element,
      hideSelectedOption: true,
      addable: this.addable ? value => value : null,
      allowDeselect: this.allowDeselect,
      placeholder: this.placeholder
    }

    if (this.optionsUrl) {
      const url = this.optionsUrl
      const _ajax = (query, callback) => {
        fetch(url.replace('QUERY', query))
          .then(response => response.json())
          .then(json => callback(json))
          .catch(error => callback(false))
      }
      const ajax = debounce(_ajax, 250)
      options.searchingText = 'Searching...'
      options.ajax = ajax
    }

    this.slimSelect = new SlimSelect(options)
  }

  delayedSetup (event) {
    setTimeout(this.setup.bind(this))
  }

  cleanup (event) {
    if (!this.slimSelect) return
    this.slimSelect.destroy()
    delete this.slimSelect
  }

  get addable () {
    return this.element.dataset.addable === 'true'
  }

  get allowDeselect () {
    return this.element.dataset.allowDeselect === 'true'
  }

  get optionsUrl () {
    return this.element.dataset.optionsUrl
  }

  get placeholder () {
    return this.element.getAttribute('placeholder')
  }
}