https://littlebirdelectronics.com.au/assets/controllers/ecommerce/address_label_controller-eb10d2fb.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["select", "customWrapper", "customInput", "hiddenInput"]
5
6  connect() {
7    this.sync()
8  }
9
10  changed() {
11    const value = this.selectTarget.value
12    if (value === "__other__") {
13      this.customWrapperTarget.classList.remove("hidden")
14      this.customInputTarget.focus()
15      this.hiddenInputTarget.value = this.customInputTarget.value || ""
16      this.customInputTarget.addEventListener("input", this.syncCustom)
17    } else {
18      this.customWrapperTarget.classList.add("hidden")
19      this.hiddenInputTarget.value = value
20      this.customInputTarget.removeEventListener("input", this.syncCustom)
21    }
22  }
23
24  sync() {
25    const value = this.selectTarget.value
26    if (value === "__other__") {
27      this.hiddenInputTarget.value = this.customInputTarget.value || ""
28      this.customInputTarget.addEventListener("input", this.syncCustom)
29    } else {
30      this.hiddenInputTarget.value = value
31    }
32  }
33
34  syncCustom = () => {
35    this.hiddenInputTarget.value = this.customInputTarget.value
36  }
37}