From 47e1059532d9dd1f42f0e81466419f852bee838b Mon Sep 17 00:00:00 2001
From: Darek <idarekj@gmail.com>
Date: Sun, 12 Apr 2026 14:20:03 -0500
Subject: [PATCH] Replace datalist autocomplete with select dropdown for brand
 fields

datalist only shows suggestions when typing, not on click. Switched to
a <select> showing all known brands plus a 'New brand...' option that
reveals a text input for entering a new brand name.
---
 templates/battery_add.html   | 45 ++++++++++++++++++++++++++++++++----
 templates/device_detail.html | 35 ++++++++++++++++++++++------
 2 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/templates/battery_add.html b/templates/battery_add.html
index 433422d..9c4f117 100644
--- a/templates/battery_add.html
+++ b/templates/battery_add.html
@@ -7,12 +7,17 @@
 <div class="card">
   <form method="post" action="{{ url_for('battery_add') }}">
     <div class="form-group">
-      <label for="brand">Brand <span class="text-danger">*</span></label>
+      <label for="brand-select">Brand <span class="text-danger">*</span></label>
+      <select id="brand-select" onchange="brandSelectChanged(this, 'brand')">
+        <option value="">— select a brand —</option>
+        {% for b in brands|default([]) %}
+        <option value="{{ b }}">{{ b }}</option>
+        {% endfor %}
+        <option value="__new__">➕ New brand…</option>
+      </select>
       <input type="text" id="brand" name="brand" value="{{ form_brand|default('') }}"
-             placeholder="e.g. Panasonic Eneloop" list="brand-list" required>
-      <datalist id="brand-list">
-        {% for b in brands|default([]) %}<option value="{{ b }}">{% endfor %}
-      </datalist>
+             placeholder="Type new brand name" required
+             style="display:none;margin-top:0.4rem;">
     </div>
 
     <div class="form-group">
@@ -32,4 +37,34 @@
     </div>
   </form>
 </div>
+
+<script>
+function brandSelectChanged(sel, inputId) {
+  var input = document.getElementById(inputId);
+  if (sel.value === '__new__' || sel.value === '') {
+    input.style.display = '';
+    input.value = '';
+    input.focus();
+  } else {
+    input.style.display = 'none';
+    input.value = sel.value;
+  }
+}
+
+// Restore state on error re-render (form_brand set)
+(function () {
+  var input = document.getElementById('brand');
+  var sel = document.getElementById('brand-select');
+  if (!input.value) return;
+  for (var i = 0; i < sel.options.length; i++) {
+    if (sel.options[i].value === input.value) {
+      sel.value = input.value;
+      input.style.display = 'none';
+      return;
+    }
+  }
+  sel.value = '__new__';
+  input.style.display = '';
+}());
+</script>
 {% endblock %}
diff --git a/templates/device_detail.html b/templates/device_detail.html
index 83d8a5b..e046e2a 100644
--- a/templates/device_detail.html
+++ b/templates/device_detail.html
@@ -29,22 +29,43 @@
   <h2>Install Batteries</h2>
   {% set free_slots = device.battery_slots - device.installed_count() %}
   <p class="text-muted" style="margin-bottom:0.75rem;">{{ free_slots }} slot(s) free</p>
-  <datalist id="brand-list">
-    {% for b in brands|default([]) %}<option value="{{ b }}">{% endfor %}
-  </datalist>
   <form method="post" action="{{ url_for('device_install', device_id=device.id) }}">
-    <div style="display:grid;grid-template-columns:1fr auto;gap:0.4rem;max-width:360px;align-items:center;margin-bottom:0.75rem;">
+    <div style="display:grid;grid-template-columns:1fr auto;gap:0.4rem;max-width:400px;align-items:start;margin-bottom:0.75rem;">
       <span style="font-weight:600;font-size:0.85rem;color:#64748b;">Brand</span>
       <span style="font-weight:600;font-size:0.85rem;color:#64748b;">Qty</span>
-      {% for _ in range(4) %}
-      <input type="text" name="brand[]" placeholder="e.g. Eneloop"
-             list="brand-list" style="padding:0.3rem 0.5rem;">
+      {% for i in range(1, 5) %}
+      <div>
+        <select onchange="brandSelectChanged(this, 'brand-{{ i }}')">
+          <option value="">— select —</option>
+          {% for b in brands|default([]) %}
+          <option value="{{ b }}">{{ b }}</option>
+          {% endfor %}
+          <option value="__new__">➕ New brand…</option>
+        </select>
+        <input type="text" id="brand-{{ i }}" name="brand[]" value=""
+               placeholder="Type brand name"
+               style="display:none;margin-top:0.3rem;padding:0.3rem 0.5rem;">
+      </div>
       <input type="number" name="qty[]" value="0" min="0"
              style="padding:0.3rem 0.5rem;width:4rem;text-align:center;">
       {% endfor %}
     </div>
     <button class="btn btn-primary" type="submit">Install</button>
   </form>
+
+<script>
+function brandSelectChanged(sel, inputId) {
+  var input = document.getElementById(inputId);
+  if (sel.value === '__new__' || sel.value === '') {
+    input.style.display = sel.value === '__new__' ? '' : 'none';
+    input.value = '';
+    if (sel.value === '__new__') input.focus();
+  } else {
+    input.style.display = 'none';
+    input.value = sel.value;
+  }
+}
+</script>
 </div>
 
 <div class="card">