From 69a4a1958742701a1101d1477aa1ff7c4b824b33 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Tue, 22 Jul 2025 12:00:27 -0500
Subject: [PATCH] Enhance dropdown functionality by adding onclick event to
 dropdown items for better item selection; improve search input handling for
 filtering options.

---
 .../fragments/_dropdown_fragment.html         | 90 ++++++++++---------
 1 file changed, 50 insertions(+), 40 deletions(-)

diff --git a/inventory/templates/fragments/_dropdown_fragment.html b/inventory/templates/fragments/_dropdown_fragment.html
index 22590df..373e128 100644
--- a/inventory/templates/fragments/_dropdown_fragment.html
+++ b/inventory/templates/fragments/_dropdown_fragment.html
@@ -1,47 +1,57 @@
 {% macro render_dropdown(id, list, label, current_item = None, entry_link = None) %}
-<label for="{{ id }}" class="form-label">
-    {{ label }}
-    {% if entry_link %}
-        {{ links.entry_link(entry_link, current_item.id) }}
-    {% endif %}
-</label>
-<div class="dropdown">
-    <button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown"
-        data-inv-value="{{ current_item.id if current_item else '' }}" aria-expanded="false">
-        {{ current_item.identifier if current_item else '-' }}
-    </button>
-    <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
-    <ul class="dropdown-menu w-100" id="menu{{ id }}">
-        <input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
-        {% for item in list %}
-            <li><a class="dropdown-item" data-inv-value="{{ item.id }}">{{ item.identifier }}</a></li>
-        {% endfor %}
-    </ul>
-</div>
-<script>
-    document.addEventListener("DOMContentLoaded", () => {
-        const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
-        const {{ id }}Input = document.getElementById("{{ id }}");
+    <label for="{{ id }}" class="form-label">
+        {{ label }}
+        {% if entry_link %}
+            {{ links.entry_link(entry_link, current_item.id) }}
+        {% endif %}
+    </label>
+    <div class="dropdown">
+        <button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown"
+            data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button">
+            {{ current_item.identifier if current_item else '-' }}
+        </button>
+        <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
+        <ul class="dropdown-menu w-100" id="menu{{ id }}">
+            <input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
+            {% for item in list %}
+                <li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
+            {% endfor %}
+        </ul>
+    </div>
+    <script>
+        function {{ id }}SetButton(id, identifier) {
+            const button = document.getElementById("{{ id }}Button");
+            const input = document.getElementById("{{ id }}");
+            button.dataset.invValue = id;
+            button.textContent = identifier;
+            input.value = id;
+            console.log("Selected {{ id }} ID:", id);
+        }
 
-        {{ id }}Dropdown.addEventListener("click", (e) => {
-            if (e.target.tagName === "A") {
-                {{ id }}Input.value = e.target.dataset.invValue;
-                console.log("Selected {{ id }} ID:", {{ id }}Input.value);
-            }
-        });
+        document.addEventListener("DOMContentLoaded", () => {
+            const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
+            const {{ id }}Input = document.getElementById("{{ id }}");
 
-        const {{ id }}SearchInput = document.getElementById("search{{ id }}");
-        searchInput.addEventListener("input", () => {
-            const filter = searchInput.value.toLowerCase();
-            const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item");
-            items.forEach(item => {
-                if (item.textContent.toLowerCase().includes(filter)) {
-                    item.style.display = "";
-                } else {
-                    item.style.display = "none";
+            {{ id }}Dropdown.addEventListener("click", (e) => {
+                if (e.target.tagName === "A") {
+                    {{ id }}Input.value = e.target.dataset.invValue;
+                    console.log("Selected {{ id }} ID:", {{ id }}Input.value);
                 }
             });
+
+            const {{ id }}SearchInput = document.getElementById("search{{ id }}");
+            console.log({{ id }}SearchInput);
+            {{ id }}SearchInput.addEventListener("input", () => {
+                const filter = {{ id }}SearchInput.value.toLowerCase();
+                const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item");
+                items.forEach(item => {
+                    if (item.textContent.toLowerCase().includes(filter)) {
+                        item.style.display = "";
+                    } else {
+                        item.style.display = "none";
+                    }
+                });
+            });
         });
-    });
-</script>
+    </script>
 {% endmacro %}
\ No newline at end of file