viewof composizioneModificabile = { const baseOriginale = shownCombi; // Creiamo il contenitore per la datalist (lo terremo aggiornato) const datalistContainer = htl.html`

`; const tbody = htl.html``; const form = htl.html`

${datalistContainer} ${tbody}

`; const render = () => { // 1. Trova tutti i nomi attualmente scritti nel form per escluderli const nomiAssegnati = new Set(Object.values(form.value).flat()); // 2. Aggiorna la datalist escludendo i nomi assegnati datalistContainer.innerHTML = ""; const nuovaDatalist = htl.html` ${getOrganico(getProduction_byID(selectProduction).primi) .filter(nome => !nomiAssegnati.has(nome)) // FILTRO MAGICO .concat(["TD","vuota"]) .map(nome => htl.html``; datalistContainer.append(nuovaDatalist); // 3. Render delle righe (come prima) tbody.innerHTML = ""; Object.entries(form.value).forEach(([num, coppia]) => { const input1 = htl.html``; const input2 = htl.html``; const gestisciFocus = (input, index) => { // Svuotiamo solo se c'è qualcosa, per evitare loop infiniti if (input.value !== "") { input.value = ""; // Svuota visivamente form.value[num][index] = ""; // Aggiorna il dato // Invece di un render() completo che distrugge l'input, // aggiorniamo solo la datalist "silenziosamente" aggiornaSoloDatalist(); } }; // Usiamo 'onfocus' invece di 'onclick' per i telefoni input1.onfocus = () => gestisciFocus(input1, 0); input2.onfocus = () => gestisciFocus(input2, 1); const update = () => { form.value[num] = [input1.value, input2.value]; render(); // Qui il render completo va bene perché l'operazione è finita form.dispatchEvent(new CustomEvent("input")); }; input1.onchange = input2.onchange = update; const tr = htl.html` ${num} ${input1} ${input2} `; tbody.append(tr); }); }; const btnReset = Inputs.button("Reset", { reduce: () => { form.value = JSON.parse(JSON.stringify(baseOriginale)); render(); form.dispatchEvent(new CustomEvent("input")); } }); form.append(htl.html`

${btnReset}

`); form.value = JSON.parse(JSON.stringify(baseOriginale)); render(); return form; }