From e67bdb32c498f589721376cf9a524d59cf040d44 Mon Sep 17 00:00:00 2001
From: Scarriffle <scarriffleservices@gmail.com>
Date: Wed, 22 Jul 2026 13:43:00 +0200
Subject: [PATCH] Gebinde-Bezeichnung als normales Dropdown (statt Textfeld mit
 datalist)

Das datalist-Eingabefeld sah anders aus als die uebrigen Auswahlfelder im
Produktformular. Jetzt ein einheitliches <select>: leerer Standardwert
"Packung (Standard)" plus gaengige Bezeichnungen (Glas, Tuete, Flasche, Dose,
Tube, Becher, Beutel, Karton, Riegel, Rolle). Ein bereits gespeicherter
abweichender Wert bleibt als Option erhalten.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/pages/ProductForm.jsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/src/pages/ProductForm.jsx b/web/src/pages/ProductForm.jsx
index dfa8541..1d799ac 100644
--- a/web/src/pages/ProductForm.jsx
+++ b/web/src/pages/ProductForm.jsx
@@ -11,8 +11,10 @@ const EMPTY = {
   unit_id: "", package_size: "", package_label: "", min_stock: "", group_id: "",
 };
 
-// Vorschläge für die Gebinde-Bezeichnung (frei überschreibbar).
-const PACKAGE_LABELS = ["Packung", "Glas", "Tüte", "Flasche", "Dose", "Tube", "Becher", "Beutel", "Karton"];
+// Auswahl für die Gebinde-Bezeichnung ("Packung" ist der leere Standardwert).
+const PACKAGE_LABELS = [
+  "Glas", "Tüte", "Flasche", "Dose", "Tube", "Becher", "Beutel", "Karton", "Riegel", "Rolle",
+];
 
 // Kanonische Einheit je Basiseinheit (für OFF-Vorschläge und Altbestand).
 const CANONICAL_NAME = { piece: "Stück", gram: "Gramm", milliliter: "Milliliter" };
@@ -278,12 +280,14 @@ export default function ProductForm() {
           <div className="row">
             <label className="grow">
               Bezeichnung der Einheit
-              <input list="package-labels" value={form.package_label}
-                onChange={(e) => set("package_label", e.target.value)} disabled={readOnly}
-                placeholder="Packung" />
-              <datalist id="package-labels">
-                {PACKAGE_LABELS.map((l) => <option key={l} value={l} />)}
-              </datalist>
+              <select value={form.package_label} onChange={(e) => set("package_label", e.target.value)}
+                disabled={readOnly}>
+                <option value="">Packung (Standard)</option>
+                {PACKAGE_LABELS.map((l) => <option key={l} value={l}>{l}</option>)}
+                {form.package_label && !PACKAGE_LABELS.includes(form.package_label) && (
+                  <option value={form.package_label}>{form.package_label}</option>
+                )}
+              </select>
             </label>
             <div className="grow" />
           </div>