https://dashboard.tastevinapp.com/assets/controllers/lazy_select_c…3741e9cad48a8ded9caab97f20c0883d36ccace2.js

1import { Controller } from "@hotwired/stimulus"
2
3// #2215 — lazily fill a <select> from a shared <template> the first time it is
4// focused. The Inventory Counts page has thousands of rows, each with a vendor
5// picker; rendering every vendor <option> on every row was ~4 MB of HTML (and a
6// huge DOM the browser had to parse on each sort). Now each row renders only its
7// current value and the rest of the options are cloned in on demand, from ONE
8// shared template. Submit is unchanged — it is still the plain <select> value.
9export default class extends Controller {
10  static values = { template: String }
11
12  connect() {
13    this._populated = false
14  }
15
16  // Idempotent: appends the shared options once, skipping any value already
17  // present (the current selection), and preserving the current value.
18  populate() {
19    if (this._populated) return
20    this._populated = true
21
22    const template = document.getElementById(this.templateValue)
23    if (!template) return
24
25    const existing = new Set(Array.from(this.element.options).map((o) => o.value))
26    const fragment = template.content.cloneNode(true)
27    fragment.querySelectorAll("option").forEach((opt) => {
28      if (existing.has(opt.value)) opt.remove()
29    })
30    this.element.appendChild(fragment)
31  }
32};