https://survivalbrasil.org/assets/controllers/utils/input_toggle_controller-71291135.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="utils--input-toggle"
4export default class extends Controller {
5  static targets = ["select", "text", "toggleButton"]
6  static values = { options: Array }
7
8  connect() {}
9
10  toggle(event) {
11    event && event.preventDefault()
12    const showSelect = this.selectTarget.classList.contains('d-none')
13
14    if (showSelect) {
15      // populate select options if needed (keep first blank option if present)
16      if (this.selectTarget.options.length <= 1 && this.optionsValue.length) {
17        // remove existing non-blank options to avoid duplicates, keep blank option if present
18        const firstIsBlank = this.selectTarget.options.length && this.selectTarget.options[0].value === ""
19        // clear non-blank options
20        const startIndex = firstIsBlank ? 1 : 0
21        for (let i = this.selectTarget.options.length - 1; i >= startIndex; i--) {
22          this.selectTarget.remove(i)
23        }
24        // append options from stored list
25        this.optionsValue.forEach(opt => {
26          const option = document.createElement('option')
27          option.value = String(opt.id)
28          option.text = opt.title
29          this.selectTarget.add(option)
30        })
31      }
32
33      // try to preserve a meaningful selection from the text input
34      const textVal = (this.textTarget.value || "").trim()
35      if (textVal) {
36        // if text is numeric and matches an id, select by id; otherwise try matching title
37        const byId = this.optionsValue.find(o => String(o.id) === textVal)
38        const byTitle = this.optionsValue.find(o => o.title === textVal)
39        if (byId) this.selectTarget.value = String(byId.id)
40        else if (byTitle) this.selectTarget.value = String(byTitle.id)
41      }
42
43      this.selectTarget.classList.remove('d-none')
44      this.selectTarget.disabled = false
45      this.textTarget.classList.add('d-none')
46      this.textTarget.disabled = true
47    } else {
48      // switch to text field and copy selection value (use id so backend still receives expected value)
49      const sel = this.selectTarget.options[this.selectTarget.selectedIndex]
50      this.textTarget.value = sel ? sel.value : ''
51      this.textTarget.classList.remove('d-none')
52      this.textTarget.disabled = false
53      this.selectTarget.classList.add('d-none')
54      this.selectTarget.disabled = true
55    }
56  }
57}