subject_selector_controller.js

import { Controller } from "@hotwired/stimulus";
import Choices from "choices.js";

export default class extends Controller {
  static targets = ["select", "submitButton"];

  connect() {
    this.choices = new Choices(this.selectTarget, {
      searchEnabled: true,
      searchPlaceholderValue: "Buscar materia...",
      placeholderValue: "Seleccionar materia...",
      itemSelectText: "",
      noResultsText: "No se encontraron materias",
      noChoicesText: "No hay materias disponibles",
      shouldSort: false,
      classNames: {
        containerOuter: ["choices", "!m-0", "!h-10", "flex-grow-1"],
        containerInner: [
          "choices__inner",
          "!min-h-10",
          "!h-10",
          "!flex",
          "!items-center",
          "!bg-white",
          "!rounded-md",
          "!px-4",
          "!py-3",
          "!border-none",
        ],
        listSingle: ["choices__list", "choices__list--single", "!p-0"],
      },
    });
  }

  onChange() {
    const selectedValue = this.selectTarget.value;
    this.submitButtonTarget.disabled = !selectedValue || selectedValue === "";
  }

  disconnect() {
    if (this.choices) {
      this.choices.destroy();
    }
  }
}